mvc3部分视图ajax post返回部分视图作为页面

I'm writing a tabbed page websystem in ASP.NET MVC3 and when I use ajax.BeginForm. The partial view isn't used to update the div but is show as a page.

我正在用ASP写一个标签页网络系统。NET MVC3，当我使用ajax.BeginForm时。部分视图不用于更新div，而是显示为页面。

What is wrong with the code? And why isn't it working? Thanks for the help!

代码有什么问题吗?为什么不奏效呢?谢谢你的帮助!

I'm to figuring it out but can't get my head around it. Here is my code:

我想弄清楚，但我想不明白。这是我的代码:

Controller:

控制器:

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

partial View:

局部视图:

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

The view that is calling the partial view:

调用局部视图的视图:

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

1 个解决方案

#1

You have to include jquery.unobtrusive-ajax.min.js in your page:

你必须包括jquer.unobtrusive -ajax.min。js在你的页面:

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