Question

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.

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>

Answer 1

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

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