根据编辑器来改变提交按钮的功能。

Question

我在我的网站上有一个允许用户编辑数量的编辑表单页面，在这个页面上，我使用了editorFor的，它看起来像这样。

@Html.EditorFor(model => model.item_qty, new { htmlAttributes = new { min = 0, @class = "form-control" } })

我有一个提交按钮，看起来是这样的

<input type="submit" value="Save" class="btn" />

我想让它变成如果用户增加了数量，它就会继续运行post方法，但另一方面，如果用户减少了数量，我希望保存按钮是这样的。但另一方面，如果用户要减少数量，我希望保存按钮看起来像这样。

<input type="submit" value="Save" onclick="confirm()" class="btn" />

凡是让用户确认后再运行帖子。

如何让我的保存按钮根据用户在editorFor中输入的内容而改变？

下面是我的整个视图页面，按照要求

@model PIC_Program_1._0.Models.JODetails
@using PIC_Program_1._0.Models
@{
    ViewBag.Title = "Edit";
    PIC_Program_1_0Context db = new PIC_Program_1_0Context();

    var currentData = db.JODetails.AsNoTracking().FirstOrDefault(j => j.ID == Model.ID);
    Component comp = db.Components.Find(Model.ComponentID);
    Item i = db.Items.Find(Model.ItemID);
}

    <script type="text/javascript">

        function clicked(e) {

        if(@i != null ) {
                var itemDiff = // model - new editorfor value;
                if (!confirm('Are you sure? Doing this will reduce item ' + @i.ItemID + ' future stock to ' + itemDiff))e.preventDefault();
            }

        }

        function OnChangeEvent(){
          alert("value is changed");

            var itemQty = $('#itemQTY').val();          
            if (itemQty < @Model.item_qty) {
                btn.Attributes.Add("onclick", "clicked(event)");
            }

        }


    </script>

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>JODetails</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)
        @Html.HiddenFor(model => model.subDetail)

        <p style="color:red">@ViewBag.Error</p>

        <div class="form-group">
            @Html.LabelFor(model => model.ItemID, "ItemID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ItemID", null, "-- Select --", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ItemID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.item_qty, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @if (ViewBag.isValid == false)
                {
                    @Html.TextBoxFor(model => model.item_qty, new { disabled = "disabled", @Value = Model.item_qty, @readonly = "readonly" })
                }
                else
                {
                    @Html.EditorFor(model => model.item_qty, new { htmlAttributes = new { onchange = "OnChangeEvent()", min = 0, @class = "form-control" @id = "itemQTY"} })
                    @Html.ValidationMessageFor(model => model.item_qty, "", new { @class = "text-danger" })
                }
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">

                    <input type="submit" value="Save" class="btn"/>

            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

对于on的改变，你可以在你的editorFor上。

@Html.EditorFor(model => model.item_qty, new {  htmlAttributes = new { onchange = "OnChangeEvent(this)", min = 0, @class = "form-control", @id ="someId" } })

<script type="text/javascript">
 function OnChangeEvent(){
    var itemQty = $('#someID').val(); //This will give you value of editor for
    alert("new value is: " + itemQty);
    //Call some controller function here and do your increase/decrease logic and return value so we know what to do. also perform your save in controller too if needed.
    @Model.IsChanged = true;
    //do other functions here also like change button
    //if decrease add below
    btn.Attributes.Add("onclick", "confirm()");
    //if increase remove and perform save.
 }
</script>

你也可以从该方法改变按钮。除非使用blazor，否则没有好的方法在服务器级别做on call事件，所以javascript是你最好的选择。

根据OP更新的答案。

@model PIC_Program_1._0.Models.JODetails
@using PIC_Program_1._0.Models
@{
    ViewBag.Title = "Edit";
    PIC_Program_1_0Context db = new PIC_Program_1_0Context();

    var currentData = db.JODetails.AsNoTracking().FirstOrDefault(j => j.ID == Model.ID);
    Component comp = db.Components.Find(Model.ComponentID);
    Item i = db.Items.Find(Model.ItemID);
}


<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>JODetails</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.ID)
        @Html.HiddenFor(model => model.subDetail)

        <p style="color:red">@ViewBag.Error</p>

        <div class="form-group">
            @Html.LabelFor(model => model.ItemID, "ItemID", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ItemID", null, "-- Select --", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.ItemID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.item_qty, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @if (ViewBag.isValid == false)
                {
                    @Html.TextBoxFor(model => model.item_qty, new { disabled = "disabled", @Value = Model.item_qty, @readonly = "readonly" })
                }
                else
                {
                    @Html.EditorFor(model => model.item_qty, new { htmlAttributes = new { onchange = "OnChangeEvent(this)", min = 0, @class = "form-control", @id = "itemQTY"} })
                    @Html.ValidationMessageFor(model => model.item_qty, "", new { @class = "text-danger" })
                }
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">

                    <input type="submit" value="Save" class="btn"/>

            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


<script type="text/javascript">

        function OnChangeEvent(){
          alert("value is changed");

            var itemQty = $('#itemQTY').val();          
            if (itemQty < @Model.item_qty) {
                btn.Attributes.Add("onclick", "clicked(event)");
            }

        }


</script>