Databases
StackOverflow2013
Postsdbo
POTwitter bootstrap modal does not load when integrating it in asp.net mvc
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter bootstrap modal does not load when integrating it in asp.net mvc
    text
    copied!<p>I want to integrate Twitter bootstrap modal but when the index page loads when i click on the button modal does not load, I have taken the reference of <a href="https://stackoverflow.com/questions/8093633/whats-the-best-way-to-call-a-modal-dialog-in-asp-net-mvc-using-twitter-bootstra">What&#39;s the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap?</a> . Please help to solve this issue, my code is written below.</p> <p>MyViewModel.cs</p> <pre><code>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace MvcTwitterBootstrap.Models { public class MyViewModel { public string Foo { get; set; } [Required(ErrorMessage = "The bar is absolutely required")] public string Bar { get; set; } } } </code></pre> <p>HomeController.cs</p> <pre><code>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcTwitterBootstrap.Models; namespace MvcTwitterBootstrap.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult Create() { return PartialView("_Create"); } [HttpPost] public ActionResult Create(MyViewModel model) { if (ModelState.IsValid) { try { SaveChanges(model); return Json(new { success = true }); } catch (Exception e) { ModelState.AddModelError("", e.Message); } } //Something bad happened return PartialView("_Create", model); } static void SaveChanges(MyViewModel model) { // Uncommment next line to demonstrate errors in modal //throw new Exception("Error test"); } } } </code></pre> <p>_Create.cshtml (PartialView)</p> <pre><code>@using MvcTwitterBootstrap.Models @model MyViewModel &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Create Foo Bar&lt;/h3&gt; &lt;/div&gt; @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" })) { @Html.ValidationSummary() &lt;div class="modal-body"&gt; &lt;div&gt; @Html.LabelFor(x =&gt; x.Foo) @Html.EditorFor(x =&gt; x.Foo) @Html.ValidationMessageFor(x =&gt; x.Foo) &lt;/div&gt; &lt;div&gt; @Html.LabelFor(x =&gt; x.Bar) @Html.EditorFor(x =&gt; x.Bar) @Html.ValidationMessageFor(x =&gt; x.Bar) &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Undo&lt;/button&gt; &lt;button class="btn btn-primary" type="submit"&gt;Save&lt;/button&gt; &lt;/div&gt; } </code></pre> <p>Index.cshtml</p> <pre><code>&lt;link href="@Url.Content("~/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" &gt; &lt;script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"&gt;&lt;/script&gt; @Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", @class = "btn btn-small btn-info" }) &lt;div id='dialogDiv' class='modal hide fade in'&gt; &lt;div id='dialogContent'&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(function () { //Optional: turn the chache off $.ajaxSetup({ cache: false }); $('#btnCreate').click(function () { $('#dialogContent').load(this.href, function () { $('#dialogDiv').modal({ backdrop: 'static', keyboard: true }, 'show'); bindForm(this); }); return false; }); }); function bindForm(dialog) { $('form', dialog).submit(function () { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { if (result.success) { $('#dialogDiv').modal('hide'); // Refresh: // location.reload(); } else { $('#dialogContent').html(result); bindForm(); } } }); return false; }); } &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload