asp.net MVC 保存提交未填充分部视图

本文关键字:填充 视图 提交 net MVC 保存 asp | 更新日期: 2023-09-27 18:33:04

我正在提交一个保存在部分视图中的表单,在控制器中,我想将其发送到显示部分视图,该路由将是/item/display/idvalue,但页面将似乎是部分视图的内容呈现为整个页面,但具有项目/保存的路由

我的控制器代码

[HttpPost]
public ActionResult Save(ItemDetail model)
    {
        if (ModelState.IsValid)
        {
            var itemLogicModel = new ItemLogicModel()
            {
                Id = model.Id,
                ChecklistItem = model.Description,
                DefaultOn = model.DefaultOn,
                FieldItem = model.FieldItem,
                ImageName = model.ImageName,
                IsSystem = model.IsSystem
            };
            mItemService.SaveItem(itemLogicModel, Enumerations.RecordSaveType.SaveAndClose);
        }
        return PartialView("Display", model);
    }

我的部分视图

@using PresentationLayer.Areas.Resource.Models
@model ItemDetail
<script type="text/javascript">
invalidSubmit = false;
</script>
@using (Ajax.BeginForm("Save", "Item", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "ViewEditPartial" }, new { id = "DetailScreen" }))
{
<div id="detail"></div>
<table>
    <tr>
        <td class="container-head-left"></td>
        <td class="container-head-middle"></td>
        <td class="container-head-right"></td>
    </tr>
    <tr>
        <td colspan="3" class="container-body">
            @Html.HiddenFor(model => model.Id, new {id = "ItemIdDisplayed"})
            <table>
                <tr>
                    <td>
                        @Html.DisplayNameFor(model => model.Description)
                    </td>
                    <td>
                        @if (@Model.ToolbarSettings.IsEditMode)
                        {
                            @Html.TextBoxFor(model => model.Description)
                        }
                        else
                        {
                            @Html.TextBoxFor(model => model.Description, new {disabled = "disabled"})
                        }
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.DisplayNameFor(model => model.IsSystem)
                    </td>
                    <td>
                        @if (@Model.ToolbarSettings.IsEditMode)
                        {
                            @Html.CheckBoxFor(model => model.IsSystem)
                        }
                        else
                        {
                            @Html.CheckBoxFor(model => model.IsSystem, new {disabled = "disabled"})
                        }
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.DisplayNameFor(model => model.DefaultOn)
                    </td>
                    <td>
                        @if (@Model.ToolbarSettings.IsEditMode)
                        {
                            @Html.CheckBoxFor(model => model.DefaultOn)
                        }
                        else
                        {
                            @Html.CheckBoxFor(model => model.DefaultOn, new {disabled = "disabled"})
                        }
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.DisplayNameFor(model => model.FieldItem)
                    </td>
                    <td>
                        @if (@Model.ToolbarSettings.IsEditMode)
                        {
                            @Html.CheckBoxFor(model => model.FieldItem)
                        }
                        else
                        {
                            @Html.CheckBoxFor(model => model.FieldItem, new {disabled = "disabled"})
                        }
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.DisplayNameFor(model => model.ImageName)
                    </td>
                    <td>
                        @if (@Model.ToolbarSettings.IsEditMode)
                        {
                            @Html.TextBoxFor(model => model.ImageName, new {@readonly = "readonly", @class = "input-disabled"})
                        }
                        else
                        {
                            @Html.TextBoxFor(model => model.ImageName, new {disabled = "disabled"})
                        }
                    </td>
                </tr>
                <tr>
                    <td>Image Preview</td>
                    <td>
                        <img src="@Model.ImagePath@Model.ImageName-red.png" alt="Red Image" />
                        <img src="@Model.ImagePath@Model.ImageName-amber.png" alt="Amber Image" />
                        <img src="@Model.ImagePath@Model.ImageName-green.png" alt="Green Image" />
                    </td>
                </tr>
            </table>
        </td>
        </tr>
    </table>
    }
    <script type="text/html" id="editButtonLink">
    <a href="#" onclick="loadEdit('@Model.Id');">Edit</a>
</script>
<script
 type="text/html" id="cancelButtonLink">
     <a href="#" onclick="loadCancel('@Model.Id');">Cancel</a>
</script>
<script type="text/html" id="saveButtonLink">
     <a href="#" onclick="loadSave();">Save</a>
</script>
<script type="text/javascript">
    function loadCancel(id) {
        $("#ViewEditPartial").load("@Url.Action("CancelEdit", "Item")", { 'id': id },
            function (response, status, xhr) {
            });
    }
    function loadEdit(id) {
        $("#ViewEditPartial").load("@Url.Action("Edit", "Item")", { 'id': id },
             function (response, status, xhr) {
             });
    }
    function loadSave() {
        document.forms["DetailScreen"].submit();
    }

    var viewModelToolbar =
    {
        newButtonClass: '@Model.ToolbarSettings.NewButtonClass',
        newActionClass: '@Model.ToolbarSettings.NewButtonAction',
        editButtonClass: '@Model.ToolbarSettings.EditButtonClass',
        saveButtonClass: '@Model.ToolbarSettings.SaveButtonClass',
        deleteButtonClass: '@Model.ToolbarSettings.DeleteButtonClass',
        cancelButtonClass: '@Model.ToolbarSettings.CancelButtonClass',
        idValue: { value: '@Model.Id' },
        };
    ko.cleanNode(document.body);
    ko.applyBindings(viewModelToolbar);
</script>

在主视图上是保存按钮,在显示部分视图的初始加载时

,实际单击该按钮并重新渲染模板
<div id="SaveButton" data-bind="css: saveButtonClass">
      <div data-bind="template: {name:'saveButtonLink'}"></div>
</div>

我希望将"保存"渲染到 ViewEditPartial 中,但它正在作为视图加载,我看不到我做错了什么

编辑::

在我的布局中

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/knockout")
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @RenderSection("script", required: false)
</head>

任何帮助将不胜感激,我已经尝试了所有建议,但没有一个有效。

asp.net MVC 保存提交未填充分部视图

通常问题是您没有在viewLayout中引用这些文件:

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

当然,jQuery也是必需的:)