如何在 mvc3 条件下更改提交按钮文本？

Question

我有 mvc 应用程序，因为我有一个表单正在接受输入，当我点击提交时，它会将值更新到数据库中。

View code: 
@model Mapping.Models.SecurityIdentifierMappingViewModel
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Mapping</legend>
        <div class="editor-label">
            @Html.Label("Pricing SecurityID")
        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.MappingControls.Id)
            @Html.DropDownListFor(model => model.MappingControls.PricingSecurityID,
         new SelectList(Model.PricingSecurities, "Value", "Text"),
         "Select SecurityID"
            )
            @Html.ValidationMessageFor(model => model.MappingControls.PricingSecurityID)
        </div>
        <div class="editor-label">
            @Html.Label("CUSIP ID")
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.MappingControls.CUSIP,
         new SelectList(Model.CUSIPs, "Value", "Text"),
            "Select CUSIP"
            )
            @Html.ValidationMessageFor(model => model.MappingControls.CUSIP)
        </div>

        <div class="editor-label">
            @Html.Label("Calculation")
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.MappingControls.Calculation)
            @Html.ValidationMessageFor(model => model.MappingControls.Calculation)
        </div>
        <p>
            <input type="submit" value="Insert" />
        </p>
    </fieldset>
}

在同一页面上，我有一个 webgrid，当我单击 webgrid 的编辑按钮时，我需要将提交按钮的文本更改为 Update。 我是新手。

Webgrid code
    @model IEnumerable<Mapping.Models.SecurityIdentifierMapping>
    @{
        ViewBag.Title = "Mapping";
        WebGrid grid = null;
        if (Model.Count() > 0)
        {
            grid = new WebGrid(source: Model,
                                    defaultSort: "Id",
                                    canPage: true,
                                    canSort: true,
                                    rowsPerPage: 10);
        }
    }
    <h3>
        Mapping Web Grid</h3>
    @if (grid != null)
    {
        @grid.GetHtml(
                    tableStyle: "grid",
                    headerStyle: "head",
                    alternatingRowStyle: "alt",
                    columns: grid.Columns(
                                                grid.Column("", header: null, format: @<text>@Html.ActionLink("Edit", "Index", new { uid = (int)item.id, userAction = "Edit" })
        @Html.ActionLink("Delete", "Index", new { uid = (int)item.id, userAction="Delete" }, new { @class = "Delete" })</text>),
                                                grid.Column("PricingSecurityID"),
                                                grid.Column("CUSIP"),
                                                grid.Column("Calculation")
                                              )

                    )
    }
    <script type="text/javascript">
        $(function () {
            $(".Delete").click(function () {
                if (confirm("Do you want to delete?")) {
                    var href = $(".Delete").attr('href');
                    href = href + "?userAction=Delete";
                    window.location.href = href;
                    return true;
                }
                return false;
            });
        });
    </script>

Answer 1

你可以给你的提交按钮一个 id：

<input id="btn-submit" type="submit" value="Insert" />

还将您的编辑锚点应用到一个类：

grid.Column(
    "", 
    header: null, 
    format: 
        @<text>
            @Html.ActionLink(
                "Edit", 
                "Index", 
                new { uid = (int)item.id, userAction = "Edit" }, 
                new { @class = "edit" }
            )
            @Html.ActionLink(
                "Delete", 
                "Index", 
                new { uid = (int)item.id, userAction="Delete" }, 
                new { @class = "Delete" }
            )
        </text>
    )

然后订阅编辑链接的点击事件：

$(function() {
    ...
    $('.edit').click(function() {
        $('#btn-submit').val('Update');
        ...
    });
});

现在，由于您的编辑锚似乎正在服务器上调用不同的操作，并且除非您使用 AJAX，否则整个页面可能会重新加载，因此使用 javascript 设置提交按钮文本可能不是一个好主意。在这种情况下，正确的处理方法是让 Edit 控制器操作在您的视图模型上设置一些属性，这将表明我们处于编辑模式并允许在提交按钮文本上设置条件。

类似这样的：

<input type="submit" value="@(Model.IsEditing ? "Update" : "Insert")" />

您可以在编辑操作中将视图模型上的 IsEditing 属性设置为 true。