mvc3 partial view ajax post將部分視圖作爲頁面返回

Question

我在ASP.NET MVC3中編寫了一個選項卡式頁面websystem，並且使用了ajax.BeginForm。部分視圖不用於更新div，但顯示爲一個頁面。

代碼有什麼問題？爲什麼它不工作？謝謝您的幫助！

我想搞清楚，但不能讓我的頭靠近它。這裏是我的代碼：

控制器：

public ActionResult Index(int id) 
    { 
     var shareholder = db.shareholder.Include("company").Include("groups"); 
     return PartialView("Index", shareholder.ToList()); 
    } 

    // 
    // GET: /Shareholder/Create 

    public PartialViewResult Create() 
    { 
     ViewBag.company_id = new SelectList(db.company, "id", "name"); 
     ViewBag.groups_id = new SelectList(db.groups, "id", "name"); 
     return PartialView("Create"); 
    } 

    // 
    // POST: /Shareholder/Create 

    [HttpPost] 
    public ActionResult Create(shareholder shareholder) 
    { 
     if (ModelState.IsValid) 
     { 
      db.shareholder.AddObject(shareholder); 
      db.SaveChanges(); 
      return RedirectToAction("Index", new { id = shareholder.company_id }); 
     } 

     ViewBag.company_id = new SelectList(db.company, "id", "name", shareholder.company_id); 
     ViewBag.groups_id = new SelectList(db.groups, "id", "name", shareholder.groups_id); 
     return PartialView("Create", shareholder); 
    } 

局部視圖：

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" 
    type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script> 
<% using (Ajax.BeginForm("Create", "Shareholder", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "tabs-2", InsertionMode = InsertionMode.Replace })) 
    { %> 
<%: Html.ValidationSummary(true) %> 
<fieldset> 
    <legend>shareholder</legend> 
    <div class="editor-label"> 
     <%: Html.LabelFor(model => model.company_id, "company") %> 
    </div> 
    <div class="editor-field"> 
     <%: Html.DropDownList("company_id", String.Empty) %> 
     <%: Html.ValidationMessageFor(model => model.company_id) %> 
    </div> 
    <div class="editor-label"> 
     <%: Html.LabelFor(model => model.name) %> 
    </div> 
    <div class="editor-field"> 
     <%: Html.EditorFor(model => model.name) %> 
     <%: Html.ValidationMessageFor(model => model.name) %> 
    </div> 
    <p> 
     <input type="submit" value="Create" /> 
    </p> 
</fieldset> 
<% } %> 
<div> 
    <%: Html.ActionLink("Back to List", "Index") %> 
</div> 

正在調用的局部視圖的視圖：

<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" 
    type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script> 
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script> 
<script type="text/javascript"> 
    var count = 2; 
    $(document).ready(function() { 
     $("#tabs").tabs(); 
     getContentTab (1, "/Company/Details/<%=Model.id %>"); 
    }); 

    function getContentTab(index, url) { 
     $.ajax({ 
      url: url, 
      success: function(result) { 
       for (var i = 0; i <= count; i++) { 
        document.getElementById("tabs-" + index).style.display = 'none';      
       } 
       $("#tabs-" + index).html(result); 
       document.getElementById("tabs-" + index).style.display = 'block'; 
       $.validator.unobtrusive.parse("form"); 
      }, 
      error: function (xhr, status, error) { 
       alert(error); 
      }, 
     }); 
    } 
</script> 
<h2> 
    <%=Model.name %></h2> 
<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1" onclick="getContentTab(1, '/Company/Details/<%=Model.id %>');"> 
      <%= VOWWebsite.Resource.Details%></a></li> 
     <li><a href="#tabs-2" onclick="getContentTab(2, '/Shareholder/Index/<%=Model.id %>');"> 
      <%= VOWWebsite.Resource.Shareholders%></a></li> 
    </ul> 
    <div id="tabs-1"> 
    </div> 
    <div id="tabs-2"> 
    </div> 
</div> 

Answer 1

你必須包括jquery.unobtrusive-ajax.min.js在您的網頁：

<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" 
type="text/javascript"></script>