Twitter引導模式不會加載時，它集成在asp.net mvc

我想整合Twitter引導模式，但當索引頁面加載時，當我點擊按鈕模式不加載，我已參考What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap?。請幫忙解決這個問題，我的代碼寫在下面。Twitter引導模式不會加載時，它集成在asp.net mvc

MyViewModel.cs

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; } 
    } 
}

HomeController.cs

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"); 
     } 

    } 
}

_Create.cshtml（PartialView）

@using MvcTwitterBootstrap.Models 
@model MyViewModel 

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Create Foo Bar</h3> 
</div> 

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" })) 
{ 
@Html.ValidationSummary() 

<div class="modal-body"> 
    <div> 
     @Html.LabelFor(x => x.Foo) 
     @Html.EditorFor(x => x.Foo) 
     @Html.ValidationMessageFor(x => x.Foo) 
    </div> 
    <div> 
     @Html.LabelFor(x => x.Bar) 
     @Html.EditorFor(x => x.Bar) 
     @Html.ValidationMessageFor(x => x.Bar) 
    </div> 
</div> 

<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Undo</button> 
    <button class="btn btn-primary" type="submit">Save</button> 
</div> 

}

Index.cshtml

<link href="@Url.Content("~/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" > 
<script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script> 

@Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", @class = "btn btn-small btn-info" }) 

<div id='dialogDiv' class='modal hide fade in'> 
    <div id='dialogContent'></div> 
</div> 

<script type="text/javascript"> 
    $(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; 
     }); 
    } 

    </script>

來源

2013-11-25 user3026519

您的部分視圖強烈鍵入MyViewModel類。但在您的Create操作方法中，您沒有將視圖模型的實例傳遞給您的部分視圖。

試試這個

public ActionResult Create() 
{ 
    var vm=new MyViewModel();   
    return PartialView("_Create",vm); 
}

來源

2013-11-25 22:13:36 Shyju

在HTML片段

<div id='dialogDiv' class='modal hide fade in'> 
    <div id='dialogContent'></div> 
</div>

嘗試刪除類 '隱藏'，使其

<div id='dialogDiv' class='modal fade in'> 
    <div id='dialogContent'></div> 
</div>

我發現從引導V2升級到何時v3沒有我現有的模式顯示，直到我刪除'隱藏'類。

我還沒有看太多，但我認爲JavaScript函數不再刪除隱藏類。

來源

2013-11-25 22:29:08 heads5150

去除皮類後，當頁面加載有按下按鈕之前和之後我在屏幕上顯示一個對話框線按按鈕對話框加載正常，但如果按下對話框撤消或保存按鈕對話框關閉，我的父視圖中按鈕所在的位置包含簡單的對話框文本。如何解決這個問題，感謝上述答案... ... – user3026519

創建Foo酒吧酒吧是絕對必需的 Foo 酒吧酒吧絕對是必需的撤消保存....這是關閉對話框後，索引視圖顯示的文本.... – user3026519

我發現單擊撤消或保存按鈕後，URL會更改爲/ Home/Create，如何解決此問題。 – user3026519

刪除您的動作鏈接，並使其成爲一個按鈕，而不是data-toggle =「modal」data-target =「＃dialogDiv」屬性。

<button class="btn btn-primary" data-toggle="modal" data-target="#dialogDiv">Create</button>

刪除$（'＃btnCreate'）。單擊JS代碼。引導程序數據屬性將處理顯示和隱藏模式。

使用索引視圖加載您的創建部分，而不是使用Ajax調用。

<div id='dialogDiv' class='modal hide fade in'> 
    <div id='dialogContent'>@Html.Partial("~/{PathToView}/_Create.cshtml", new MyViewModel())</div> 
</div>

確保您正在加載jquery-validate JS庫。

修改創建控制器行動，成功返回RedirectResult而不是JSON結果：

return RedirectToAction("Index");

來源

2015-01-28 20:45:22 Vito

Twitter引導模式不會加載時，它集成在asp.net mvc

回答

相關問題