Reloading the ASP.NET MVC bootstrap modal using Ajax for a fresh look

I'm struggling with my bootstrap modal. Whenever I click the submit button, the page refreshes and the modal disappears. How can I keep the modal open after clicking the submit button to display either a success or error message? I am new to MVC and haven't been able to solve this issue.

Here's my modal:

<div class="modal fade" id="signin_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class=" modal-header">
                Create An Account
            </div>

            <div class="modal-body">

                @using (Html.BeginForm("Login", "Home", FormMethod.Post))
                {
                    <table>


                        <tr><td>@Html.Label("username", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("name", null, new { style = " width:200px; height:30px; " })</td></tr>


                        <tr> </tr>

                        <tr><td>@Html.Label("password", null, new { style = " font-size:12px; font-weight:normal; font-family:consolas; " })</td></tr>
                        <tr><td>@Html.TextBox("password", null, new { style = " width:200px; height:30px " })</td></tr>

                    </table>
                }

            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-success">Sign in</button>
                @*<button type="reset" class="btn btn-warning">Reset</button>*@
                <button type="reset" class="btn btn-default">Reset</button>
            </div>

        </div>
    </div>
</div>
javascriptasp.netajaxtwitter-bootstrap

Answer №1

Although this may be an older question, here is my approach to handling it.

If you are utilizing strongly typed view models, one way to handle this is by adding a property called IsModalShown like so:

public class Foo
{
    public bool IsModalShown { get; set; }
}

Include this as a hidden field in your view:

@Html.HiddenFor(m => m.IsModalShown)

When the modal needs to be displayed, update the hidden value to true and post back to the controller action:

$('#signin_modal').on('show.bs.modal', function (e) {
    $('#IsModalShown').val(true);
})

Keep in mind that the code snippet above can vary depending on the Bootstrap version you're using, but official documentation can provide guidance.

Finally, include the following script in your view to automatically show the modal:

$(function(){
    @if(Model.IsModalShown)
    {
        $('#signin_modal').modal('show');
    }
});

You can also use properties in the model to populate other fields within the modal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure the alignment of list content and numbering remains separate in HTML while using list-style-position set to inside?

Below is a list with customized styling: ol { background: #ff9999; padding: 20px; list-style-position: inside; } ol li { background: #ffe5e5; padding: 5px; } <ol> <li>Coffee</li> <li>Tea</li> <li>Coca ...

javascripthtmlcssstylesheet

Utilizing React Recharts to create personalized tooltips

In my current project, I am looking to create a custom tooltip to replace the default one in recharts. The default tooltip that I want to change is shown below: https://i.stack.imgur.com/TjTiL.png I would like the new custom tooltip to look like this: ...

javascriptreactjsmaterial-uirecharts

Transform an array of strings into a JSON object or array

Is there a way to transform a JavaScript string array into a JSON string? var arr = "{'id': '10', 'name': 'test1'},{'id': '11', 'name': 'test2'}"; This would allow for easy a ...

javascriptjson

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

javascripthtmlangularjsangularjs-ng-repeatdirpagination

How to make a JQuery list item unselectable when appending it

I encountered a strange issue while using jQuery to append items to a list. <ul id="idNicheItems" class="clScrollItems ui-widget-content ui-corner-all"> <li id="NicheItem_1"> Item 1</li> <li id="NicheItem_2"> Item 2</li& ...

javascriptjquerylistappend

Emberjs 1.0: Data Changes don't Refresh Computed Property and Template

In my Ember.js application, I am using a datepicker which is integrated for selecting dates. When a date is clicked on the datepicker, a computed property should compare the selected date with the dates available in the timeslot to check for a match. Based ...

javascriptember.jshandlebars.jsember-router

Mapping API for JavaScript, converting coordinates into precise locations

I have two coordinates: 54.674705589 and 25.289369548. I want to place these coordinates on a map when the button is clicked, similar to this example. However, the example provided is for addresses, not coordinates. Is it possible to modify this example t ...

javascriptapidictionarygisarcgis

Guide for creating a CORS proxy server that can handle HTTPS requests with HTTP basic authentication

For my http requests, I've been utilizing a CORS-Proxy which works well for me. However, I recently stumbled upon an API for sending emails which requires http basic authentication for https requests. I'm uncertain of how to go about implementing ...

javascripthttpsproxycors

Having difficulty transmitting the value attribute to the server via ajax

$(function(){ $('.menu').on('click', (function(){ $('#box').toggle('slide'); $.ajax({ url:'fetchsubmenu.php'; data : {nume : $(this).attr('value')}, dataType : ...

jqueryajax

Unable to locate the value of the query string

I need help finding the query string value for the URL www.example.com/product?id=23 This is the code I am using: let myApp = angular.module('myApp', []); myApp.controller('test', ['$scope', '$location', '$ ...

javascriptangularjs

Showing dummy data in demo mode with an AngularJS table

I stumbled upon this interesting jsfiddle http://jsfiddle.net/EnY74/20/ that seems to be using some demo data. If you check out this example https://jsfiddle.net/vsfsugkg/2/, you'll notice that the table originally has only one row, but I modified it ...

javascriptjqueryangularjspaginationjquery-pagination

Refresh the page once the .each function has finished executing

Struggling with an issue while working on an array and AJAX queries in jQuery using $.ajax alongside the $.each function. The goal is to refresh the page once all the elements in the array have been processed, but currently facing a problem where the page ...

jqueryajaxeach

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

Is it possible to simultaneously wait for the completion of two methods instead of awaiting each one individually?

When dealing with 2 async methods, one may want to run them simultaneously but wait for both to finish before proceeding. Here is an example: exports.get = async id => { const part1 = await context.get(id); const part2 = await context.get2(id ...

javascriptnode.js

What is the best way to modify the attributes of an object within the state?

Although I've been working with the React framework for a few weeks now, I still find myself surprised by new challenges on a regular basis. Currently, I am focused on developing the login/game lobby/server lobby for a group project game. The concept ...

javascriptreactjs

Laravel fails to generate log file for error incident

In my Laravel website, I have implemented a basic form for users to ask questions. However, when I tried submitting the form using Ajax, I encountered an error in the console: GET http://localhost/sencare_v2/ask-question-form-submit?first_name=shbshb&a ...

phphtmlajaxlaravellaravel-routing

Is it possible to nest clicks for ajax calls within the results of a previously appended call?

As I dive into learning about AJAX to enhance page loading speed by avoiding reliance on PHP for displaying results, I've encountered a challenge. I have three tiers of data distributed across three database tables: The first tier of data is fetche ...

phpjqueryhtmlajaxnested

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications

Could this be a glitch in jQuery, or have I overlooked something important?

Currently, I am utilizing jquery-1.3.2 within an AJAX-driven web application. The jQuery ajax method $.post() is used for sending requests to the server. On the server-side, PHP is utilized to construct an array which is then encoded using json_encode. Su ...

phpjqueryajax

The information does not display in the AngularJS-generated table

Struggling with AngularJS directives? Let's take a look at the code: <div ng-controller="Controller"> <table> <thead> ....... </thead> <tfoot> ....... </tfoot> <tbody> < ...

javascripthtmlangularjs