MVC3 部分视图 AJAX 帖子将部分视图作为页面返回

Question

我正在 ASP.NET MVC3中编写一个选项卡式页面Web系统，当我使用ajax时。开始形式。分部视图不用于更新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>