根据编辑器情况更改提交按钮的作用

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

您可以在编辑器上进行以下更改：

@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，否则在服务器级别没有很好的方法来处理呼叫事件，因此 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>