Question

我之前遇到过一个问题，我无法获得部分视图，只需更新而不是重定向到另一个页面。解决了这个问题，因为它不再重定向页面，但由于某种原因，它拒绝显示有问题的局部视图的内容。我检查了页面源代码，它正确呈现局部视图，但没有显示。

调用局部视图的视图:(应该注意这也是局部视图）

<br />
@using (Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style = "" }))
{
    @*Dropdowns*@
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 12em;">
        @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels);
    </select>
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 12em;"></select>
    <select id="ProjectDropDown" name="Project" style="width: 12em;" onchange="javascript: FillReleases();"></select>
    <select id="ReleaseDropDown" name="Release" style="width: 12em;"></select>
    <button type="submit" id="GoButton" style="visibility:hidden;"/>
}

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

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        $("#DropDownForm").on("submit", function (event) {
            event.preventDefault();
            var form = $(this);
            var Project = $('#ProjectDropDown').val();
            var Release = $('#ReleaseDropDown').val();
            $.ajax({
                url: form.attr("action"),
                async: false,
                method: form.attr("method"),
                data: form.serialize()
            })
            .done(function (result) {
                $("#ReleaseTableBody").empty();
                $("#ReleaseTableBody").html(result);
            });
        });
    });
</script>

调用部分视图：

@model List<ProblemReportPredictions.Models.PlannedOpenClose>



<table align="center"
       style=" border:solid;
               border-width:thin;
               border-color:lightgray;
               font: lighter 12px 'Segoe UI';
               color: slategray;
               text-align: left;">
    <tr>
        <th field="Project" width="150">Project</th>
        <th field="Period" width="125">Period</th>
        <th field="Planned Open" width="100">Planned Open</th>
        <th field="Planned Close" width="100">Planned Close</th>
        <th field="Forecast Open" width="100">Forecast Open</th>
        <th field="Forecast Close" width="100">Forecast Close</th>
        <th field="Service Ceiling" width="100">Service Ceiling</th>
    </tr>
@{var color = "White"; }

@foreach (var item in Model)
{
    if (color == "LightGray")
    {
        color = "White";
    }
    else
    {
        color = "LightGray";
    }
    <tr style="background-color:@color">
        <td width="150">@ViewBag.Project</td>
        <td width="125">@String.Format("{0:dd-MM-yyyy}",item.Period)</td>
        <td><input type="text" value=@item.PlanOpen></td>
        <td width="100">@item.PlanClosed</td>
        <td width ="100">@item.ForecastOpen</td>
        <td width="100">@item.ForecastClosed</td>
        <td width="100">@item.GateCeiling</td>
    </tr>   
}
</table>

<br />
<div style="text-align:center;">
    <button>Submit</button>
</div>

控制器：

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 && (Release == null || row.Release == Release))
                   select row;

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

现在，当我运行页面并查看源代码时，这是我取代部分视图呈现的源代码（故意用于将无法找到的版本）：

<form id="ReleaseTableBody" style="text-align:center;">


    <table align="center"
           style=" border:solid;
                   border-width:thin;
                   border-color:lightgray;
                   font: lighter 12px 'Segoe UI';
                   color: slategray;
                   text-align: left;">
        <tr>
            <th field="Project" width="150">Project</th>
            <th field="Period" width="125">Period</th>
            <th field="Planned Open" width="100">Planned Open</th>
            <th field="Planned Close" width="100">Planned Close</th>
            <th field="Forecast Open" width="100">Forecast Open</th>
            <th field="Forecast Close" width="100">Forecast Close</th>
            <th field="Service Ceiling" width="100">Service Ceiling</th>
        </tr>


    </table>

    <br />
        <div style="text-align:center;">
        <button>Submit</button>
    </div>


</form>

除了这个html实际上没有在页面上呈现...它只是在页面上产生一个空白点。

Answer 1

问题在于元素：

<button type="submit" id="GoButton" style="visibility:hidden;"/>

出于某种原因，即使它有/＆gt;，也没有关闭按钮元素。我改成了：

<button type="submit" id="GoButton" style="visibility:hidden;"></button>

它开始工作了。可能是Internet Explorer 9的一个问题（不幸的是我的公司使用的......）考虑到它将样式应用于按钮之后的所有内容（包括它们都在按钮中被考虑），你会认为设置元素本身对于html之后，可见会对html做同样的事情，但事实并非如此。

当由ajax调用

1 个答案: