Question

我有一个问题，涉及从包含第一个视图的另一个局部视图更新局部视图。

我根据之前的选择填充了4个下拉列表，然后用户可以提交他们的选择并查询数据库并根据他们的选择填充表格。我应该注意到我对asp.net mvc很新，但它对我来说仍然很混乱。

以下是我的代码：

<form action="/Home/LoadRelease" method="post" style="text-align: center;">
    @*Headers*@
    <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div>
    <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div>
    <div id="ProjectLabel" class="inline" style="width:17em;">Project</div>
    <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div>

    <br />

    @*Dropdowns*@
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;">
    @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
    </select>
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select>
    <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select>
    <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select>
    <input type="submit" id="GoButton" style="visibility:hidden;" value="Go" />

</form>
<form id="ReleaseTableBody" style="text-align:center;">
    @Html.Partial("_TableBody", Model.OpenCloseViewModels)  //I want to update this.
</form>
<br />

和Home / LoadRelease：

    [HttpPost]
    public ActionResult LoadRelease(string Project, string Release)
    {
        var ProjectID = _ProblemReportsDB.ProjectMaps
             .Where(r => r.Project == Project)
             .Select(r => r.ID).FirstOrDefault();

        ViewBag.Project = Project;

        var Releases = from row in _ProblemReportsDB.PlannedOpenCloses
                       where (row.Project == ProjectID)
                       select row;

        return PartialView("_TableBody", Releases.ToList());
    }

上面加载了部分视图＆＃34; _TableBody＆＃34;，但实际上是指向只包含_TableBody内容的页面。

理想情况下，我会继续显示页面，只更新页面的_TableBody部分。我想我明白为什么它当前失败了，我告诉它运行动作/ Home / LoadRelease，它返回它加载的_TableBody局部视图。

我无法弄清楚如何更新_TableBody局部视图。

感谢您提供的任何帮助。

编辑：

尝试Jasens方法我已经开始使用ajax函数：仍然加载到另一个页面而不是更新部分：

代码：

    @using (Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style="" }))
{ 
    @*Headers*@
    <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div>
    <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div>
    <div id="ProjectLabel" class="inline" style="width:17em;">Project</div>
    <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div>

    <br />

    @*Dropdowns*@
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;">
        @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
    </select>
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select>
    <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select>
    <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select>
    <button type="submit" id="GoButton" style="visibility:hidden;">Go</button>
}
@*</form>*@

<form id="ReleaseTableBody" style="text-align:center;">
    @Html.Partial("_TableBody", Model.OpenCloseViewModels)
</form>
<br />

在索引中:( _DropDownBody的父级）：

<script src="~/Scripts/jquery-1.10.2.js">
    $(document).ready(function () {
        $("#DropDownForm").on("submit", function (event) {
            event.preventDefault();

            var form = $(this);
            var Project = $('#ProjectDropDown').val();
            var Release = $('#ReleaseDropDown').val();
            alert(Project);
            $.ajax({
                url: form.attr("action"),
                method: form.attr("method"),
                data: form.serialize()
            })
            .done(function (result) {
                $("#ReleaseTableBody").html(result);
            });
        });

    });
</script>

使用A. Burak Erbora的方法也会产生同样的问题。我错过了什么吗？

最终修改：Jasen的回答有效，并允许我更新部分视图而无需重定向。仍然有问题得到部分显示我的内容，但问题是 - Jasen的答案有效！

Answer 1

提交表单将导致导航。由于您希望保持在同一页面上，因此您需要捕获提交事件并使用AJAX更新页面。

主视图

@using(Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style = "" })
{
    <!-- your drop down inputs -->
    <button type="submit">Go</button>
}
<form id="ReleaseTableBody" style="text-align:center;">
    @Html.Partial("_TableBody", Model.OpenCloseViewModels)  //I want to update this.
</form>

然后是页面脚本（不要忘记在此之前加载jquery.js）。另请注意，如果要嵌入部分视图，则需要将此脚本“向上”移动到父级，因为@section不会在部分视图中呈现。

<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    $("#DropDownForm").on("submit", function(e) {
        // prevent default submission
        e.preventDefault();

        // do AJAX post instead
        var form = $(this);
        $.ajax({
            url: form.attr("action"),
            method: form.attr("method"),
            data: form.serialize()
        })
        .done(function(result) {
            // replace content
            $("#ReleaseTableBody").html(result);
        });
    });
}
</script>

控制器动作不变

[HttpPost]
public ActionResult LoadRelease(string Project, string Release)
{
    // search
    return PartialView("_TableBody", results);
}

Answer 2

首先，我建议您使用html助手。你在这里需要的是一个ajax调用而不是标准的表单帖子。而不是

<form action="/Home/LoadRelease" method="post" style="text-align: center;">

你可以使用

@using (Ajax.BeginForm("LoadRelease", "Home", options)){

        @*Headers*@
        <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div>
        <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div>
        <div id="ProjectLabel" class="inline" style="width:17em;">Project</div>
        <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div>

        <br />

        @*Dropdowns*@
        <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;">
        @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
        </select>
        <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select>
        <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select>
        <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select>
        <input type="submit" id="GoButton" style="visibility:hidden;" value="Go" />

    }

你的html中的某个地方：

<div id="ReleaseTableBody">
    @Html.Partial(_TableBody", Model.OpenCloseViewModels)
</div>

您需要为Ajax助手定义options对象，如：

var options = new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "ReleaseTableBody",
    OnBegin = "OnCallbackBegin",
    OnFailure = "OnCallbackFailure",
    OnSuccess = "OnCallbackSuccess",
    LoadingElementId = "loading"
};

如果您定义JavaScript函数，也可以使用事件回调方法：

<script>

function OnCallbackBegin() {
    $(".btn-loading-icon").show();
    $(".btn-loading-text").hide();
}
function OnCallbackSuccess(data) {
    //alert("onSuccess: result = " + data.result);
    $(".btn-loading-icon").hide();
    $(".btn-loading-text").show();
    SomeOtherFunction();
}

我还建议您使用@Html.DropdownFor助手进行下拉。

仅从另一个部分视图更新asp.net mvc中的部分视图

2 个答案: