How to change submit button text on codition in mvc3?

Question

i have mvc application in that i have one form which is taking inputs and when i click on submit it is updating values into database .

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>
}

on same page i have a webgrid I need to change text of submit button to Update when I clicked on webgrid's edit button. i'm newbie.

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

You could give your submit button an id:

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

also apply your Edit anchor a class:

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>
    )

and then subscribe to the click event of an edit link:

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

Now since your Edit anchor seems to be calling a different action on the server and the entire page will probably be reloaded unless you are using AJAX, usnig javascript to set the submit button text is probably not a good idea. In this case the correct way to handle it would be to have the Edit controller action set some property on your view model which will indicate that we are in edit mode and allow to set a condition on the submit button text.

Something like this:

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

Up to you to set the IsEditing property on your view model to true in the Edit action.