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

时间:2012-04-18 15:20:59

标签: asp.net-mvc asp.net-mvc-3 model-view-controller

我有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>

1 个答案:

答案 0 :(得分:2)

您可以将提交按钮设为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,否则可能会重新加载整个页面,因此使用jn来设置提交按钮文本可能不是一个好主意。在这种情况下,处理它的正确方法是让Edit控制器操作在视图模型上设置一些属性,这将指示我们处于编辑模式并允许在提交按钮文本上设置条件。

这样的事情:

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

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