【问题标题】:Getting button Id and passing id to a model button id获取按钮 ID 并将 ID 传递给模型按钮 ID
【发布时间】:2020-11-16 13:44:47
【问题描述】:

我有一个动态按钮,它有一个 Stepid 属性。我想做什么 是在单击按钮时捕获该属性并将相同的属性传递给我的模型并将 StepId 值分配为我在模态中的按钮 ID。

我的按钮

 <button class="btn btn-warning moveRecipeStep" id="blah" data-bind="attr: {'data-id': StepId, data_recipe_name: $parent.RecipeName}" data-toggle="modal" data-target="#moveRecipeReason">@Html.LocalisedStringFor(model => model.MoveToStageText)</button>

和我的模态

    <section id="hidden">
        <div class="modal fade" id="moveReason" tabindex="-1" role="dialog" arial-labelledby="moveReasonLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="moveReasonLabel">What is the reason for the Step move?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body reasonDialog">
                        <form>
                            <div class="form-group">
                                @Html.LabelFor(model => model.ReasonText)
                                @Html.TextAreaFor(model => model.ReasonText, new { rows = 4, @class = "form-control", maxlength = "100", data_bind = "value: Reason" })
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="DoMove" type="button" class="btn btn-primary">@Html.LocalisedStringFor(model => model.SubmitText)</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="moveRecipeReason" tabindex="-1" role="dialog" arial-labelledby="moveReasonLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="moveReasonLabel">What is the reason for the Recipe move?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body reasonDialog">
                        <form>
                            <div class="form-group">
                                @Html.LabelFor(model => model.ReasonText)
                                @Html.TextAreaFor(model => model.ReasonText, new { rows = 4, @class = "form-control", maxlength = "100", data_bind = "value: Reason" , id = "blah" })
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="DoMoveRecipe" type="button" class="btn btn-primary">@Html.LocalisedStringFor(model => model.SubmitText)</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

还有我的 javascript

                    var input = $(this);
                    var buttonId = input.attr("id");
                    var id = input.data("id");
                    var url = buttonId === 'MoveNext' ? '@Url.Action("MakeNext")' : '@Url.Action("MoveRecipePosition")';

                    $("#moveReason").modal("toggle");
                    if (buttonId === "MoveNext") {
                        $.ajax(url,
                            {
                                data: {
                                    "Id": id,
                                    "Reason": $("#moveReason .reasonDialog textarea").val(),
                                },
                                cache: false,
                                method: "POST",
                            }).done(function(returnData) {
                            if (returnData) {
                                if (returnData.BrokenRule !== null) {
                                    alert(returnData.BrokenRule.Message);
                                } else if (returnData.ProcessStep !== null) {
                                    var bFound = false;
                                    //Done like this because you can only move backwards. Originally the logic was fuller but, most things don't change now.
                                    //The extra logic just hides everything past the active one
                                    for (var pos = 0; pos < viewModel.Stages().length; pos++) {
                                        if (bFound) {
                                            viewModel.Stages()[pos].Id(-1);
                                            viewModel.Stages()[pos].IsNext(false);
                                        } else if (viewModel.Stages()[pos].Id() == returnData.ProcessStep.Id) {
                                            viewModel.Stages()[pos].IsNext(returnData.ProcessStep.IsNext);
                                            viewModel.Stages()[pos].BenchId(returnData.ProcessStep.BenchId);
                                            viewModel.Stages()[pos].BenchName(returnData.ProcessStep.BenchName);
                                            viewModel.Stages()[pos].IsTransacted(returnData.ProcessStep.IsTransacted);
                                            viewModel.Stages()[pos].RecipeName(returnData.ProcessStep.RecipeName);

                                            bFound = true;
                                        }
                                    }
                                }
                            }
                        }).fail(function(xhr) {
                            try {
                                console.log(xhr.statusText);
                                console.log(xhr.responseText);
                                alert(xhr.statusText + "\r\n" + xhr.responseText);
                            } catch (ex) {
                                console.log(ex);
                                alert(ex);
                            }
                        });
                    } else {
                        $.ajax(url,
                            {
                                data: {
                                    "SerialNumber": viewModel.SerialNumber(),
                                    "Message": $("#moveRecipeReason .reasonDialog textarea").val(),
                                    "StepId": a
                                },
                                cache: false,
                                method: "POST"
                            }).done(function(returnData) {
                            if (returnData) {
                                if (returnData.BrokenRule !== null) {
                                    alert(returnData.BrokenRule.Message);
                                } else if (returnData.recipePosition !== null) {
                                    var bFound = false;
                                    //Done like this because you can only move backwards. Originally the logic was fuller but, most things don't change now.
                                    //The extra logic just hides everything past the active one
                                    for (var pos = 0; pos < viewModel.Stages().length; pos++) {
                                        if (viewModel.Stages()[pos].RecipeName() !==
                                            returnData.recipePosition.RecipeName)
                                            continue;

                                        for (var innerPos = 0;
                                            innerPos < viewModel.Stages()[pos].RecipeStages().length;
                                            innerPos++) {

                                            var recipeStage = viewModel.Stages()[pos].RecipeStages()[innerPos];

                                            if (bFound) {
                                                recipeStage.StepId(-1);
                                                recipeStage.IsNext(false);
                                            } else if (viewModel.Stages()[pos].Id() === returnData.ProcessStep.Id) {
                                                recipeStage.StepId(-1);
                                                recipeStage.IsNext(true);

                                                bFound = true;
                                            }

                                        }
                                    }
                                }
                            }
                        }).fail(function(xhr) {
                            try {
                                console.log(xhr.statusText);
                                console.log(xhr.responseText);
                                alert(xhr.statusText + "\r\n" + xhr.responseText);
                            } catch (ex) {
                                console.log(ex);
                                alert(ex);
                            }
                        });
                    }
                })
            });

如果有人能给我一些指导,那将不胜感激。非常感谢。

【问题讨论】:

    标签: javascript c# jquery model-view-controller razor


    【解决方案1】:

    可以更简单,这里有个通用的概念:How do you handle multiple submit buttons in ASP.NET MVC Framework?

    简单的方法:

    1. 多个提交按钮,名称相同(设为abcd),值不同
    2. .NET 控制器内部回发函数有一个字符串名称(所以字符串 abcd)输入参数,您可以在其中检查值

    【讨论】:

    • 您好,这需要在客户端完成,而不是在回发时完成。
    猜你喜欢
    • 1970-01-01
    • 2016-07-29
    • 2021-12-07
    • 2013-06-18
    • 2021-07-18
    • 1970-01-01
    • 2015-09-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多