mvc 3 - ajax.begin表单和httppost上的局部视图

时间:2012-08-19 18:05:58

标签: asp.net-mvc-3 partial-views

我有一个partialView的问题,用Ajax.PostBack发布后无法加载parital视图。当我单击提交按钮时,partialView呈现为视图而不是部分。这是我的控制者:

[HttpPost]
            public PartialViewResult UpdatePersonalData(UserLine user)
            {
                var usr = um.GetUserByLoginMapper(User.Identity.Name);
                ViewBag.Regions = rm.GetAllRegionsMapper().ToList();
                if (ModelState.IsValid)
                {
                    return PartialView("getLabelsPersonalData", usr);
                }

                return PartialView("getPersonalData", user);
            }

public PartialViewResult getPersonalData()
        {
            ViewBag.Regions = rm.GetAllRegionsMapper().ToList();
            var user = um.GetUserByLoginMapper(User.Identity.Name);
            return PartialView("getPersonalData", user);
        }

        public PartialViewResult getLabelsPersonalData()
        {
            var user = um.GetUserByLoginMapper(User.Identity.Name);
            return PartialView("getLabelsPersonalData", user);
        }

getPersonalData.cshtml - partialView

@model MasterProject.JobForYouFinal.BO.UserLine
    @using (Ajax.BeginForm("UpdatePersonalData", new AjaxOptions
    {
        UpdateTargetId = "personalDataContent",
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST"

    }))
    {
        <table style="text-align:center; margin:0 auto;">
        <tr>
            <td>@Html.LabelFor(a => a.PersonalData.Name)</td>
            <td>@Html.EditorFor(a => a.PersonalData.Name)</td>
        </tr>
        <tr>
            <td>@Html.LabelFor(a => a.PersonalData.LastName)</td>
            <td>@Html.EditorFor(a => a.PersonalData.LastName)</td>
        </tr>
        <tr>
            <td>@Html.LabelFor(a => a.Address.PostCode)</td>
            <td>@Html.EditorFor(a => a.Address.PostCode)</td>
        </tr>
        <tr>
            <td>@Html.LabelFor(a => a.PersonalData.KeyWord)</td>
            <td>@Html.EditorFor(a => a.PersonalData.KeyWord)</td>
        </tr>
        <tr>
                    <td><input id="save" type="submit" value="Zapisz" /></td>
                    <td>@Ajax.ActionLink("Anuluj", "getLabelsPersonalData", new AjaxOptions {
                       UpdateTargetId = "personalDataContent",
                       InsertionMode = InsertionMode.Replace
                   })</td>

                </tr>
        <tr>
        <td>@Html.ValidationSummary()</td>
        </tr>

        </table>
        }

getLabelPersonalData.cshtml - partialView

@model MasterProject.JobForYouFinal.BO.UserLine

                <table class="myAccountTable">
                 <tr>
                    <td>@Html.LabelFor(a => a.RegistrationDate)</td>
                    <td>@Html.DisplayFor(a => a.RegistrationDate)</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(a => a.PersonalData.Name)</td>
                    <td>@Html.DisplayFor(a => a.PersonalData.Name)</td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(a => a.PersonalData.LastName)</td>
                    <td>@Html.DisplayFor(a => a.PersonalData.LastName)</td>
                </tr>

                <tr>
                    <td>@Html.LabelFor(a => a.PersonalData.KeyWord)</td>
                    <td>@Html.DisplayFor(a => a.PersonalData.KeyWord)</td>
                </tr>
                <tr>
                    <td colspan="2"><input id="personalDataButton" type="submit" value="Edytuj" /></td>
                </tr>
                </table>
index.cshtml = glowny widok

<div class="empAccountSectionContainer">
            <div id="personalDataHeader" class="empAccountSectionHeader">Dane personalne</div>
             @using (Ajax.BeginForm("getPersonalData", new AjaxOptions
             {
                 UpdateTargetId = "personalDataContent",
                 InsertionMode = InsertionMode.Replace

             }))
             {
            <div id="personalDataContent" class="empAccountSectionBody">
                @{Html.RenderPartial("getLabelsPersonalData", Model.User);}

           </div>
             }
        </div>

尝试使用一些onSuccess函数修复此问题:

<script type="text/javascript">
    function onSuccess() {
        $('#personalDataContent').load('EmployeeAccount/getLabelsPersonalData');
    }
</script>

这是我的布局导入

   <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>


            <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/start/jquery-ui.css" rel='stylesheet' type='text/css'>
            <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
            <script str="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmplPlus.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
            <script str="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/Styles.css")" rel="stylesheet" type="text/css" />

            <link href="@Url.Content("~/Content/jquery-ui-1.8.22.custom.css")" rel="Stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/jquery.ui.dialog.css")" rel="Stylesheet" type="text/css" />
            <link href="@Url.Content("~/Content/jquery.ui.theme.css")" rel="Stylesheet" type="text/css" />
        </head>

I had to pust this:

    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

在我的partialView中,因为验证不起作用。现在验证工作正常,但是当模型有效时,无法将局部视图加载为部分视图。

但仍然没有结果。请帮忙。

1 个答案:

答案 0 :(得分:0)

我知道这是一个老问题,但我遇到了同样的问题。我在我的视图中使用下面的代码解决了它:

@{
    Layout = Request.IsAjaxRequest()?null:"~/Views/Shared/Layout.cshtml";
}

我不知道这个解决方案是否是最好的解决方案,但肯定有效; - )