Question

我有一个观点。我想加载它以获取所有信息，然后点击修改或删除按钮执行操作。点击修改按钮后，我希望它转到另一个视图。

    @model Models.CountryLanguagesModel

@{
    ViewBag.Title = "Language";
}


<div class="span4 proj-div text-center" data-toggle="modal" data-target="#addLanguageModal">
    <u>Add Language</u>
    <div><br /> </div>

    <table class="table table-bordered table-dark-header table-responsive">
        <tr>
            <th class="text-center">Language Name</th>
            <th class="text-center">Welcome Message</th>
            <th></th>
        </tr>


        @foreach (var item in Model.CountryLanguages)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.LanguageName)</td>
                <td>@Html.DisplayFor(modelItem => item.WelcomeMessage)</td>

            </tr>
        }
    </table>
</div>

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <button class="btn btn-success" id="editLanguage">Edit</button>
        <button class="btn btn-danger" id="deleteLanguage">Delete</button>
    </div>
</div>

<div class="modal fade" id="addLanguageModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Add Language</h3>
            </div>
            <div class="modal-body">
                <div class="form-group">

                </div>
                <div class="form-group">
                    <div class="left">
                        <label>Language Name:</label>
                    </div>
                    <div class="right">
                        <input type="text" class="form-control" name="languageName" id="languageName" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="left">
                        <label>Welcome Messagee:</label>
                    </div>
                    <div class="right">
                        <input type="text" class="form-control" name="welcomeMessage" id="welcomeMessage" />
                    </div>
                </div>

            </div>
            <div class="modal-footer">

                <button class="btn btn-gray" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary" id="addLanguageBtn">Save</button>
            </div>
        </div>
    </div>
</div>


@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addLanguageBtn").on("click", function (evt) {
                var CountryId = @Model.CountryId;
                var languageName = $("#languageName").val();
                var welcomeMessage = $("#welcomeMessage").val();
                $.post("/Country/AddLanguage", { id: CountryId, languageName: languageName, welcomeMessage: welcomeMessage }, function (data) {

                    $("#languageName").val("");
                    $("#welcomeMessage").val("");
                    $("#addLanguageModal").modal('hide');
                });
            });

            $("#editLanguage").on("click", function (evt) {
                var CountryId = @Model.CountryId;
                $.post("/Country/LanguageEdit", { id: CountryId }, function () {
                });
            });

            $("deleteLanguage").on("click", function (evt) {
                var CountryId = @Model.CountryId;
                $.post("/Country/LanguageDelete", { id: CountryId }, function () {
                });
            });
        });
    </script>
}

现在的问题是当页面加载时，我发现代码到达了click事件脚本。它很奇怪。当我单击按钮时，它不会到达脚本。但它转到控制器动作方法，

 [HttpPost]
    public ActionResult LanguageEdit(MyModel model)
    {

我猜一些愚蠢的错误导致onclick事件未正确触发，但我无法弄明白。

修改

 public ActionResult LanguageEdit(int id)
    {
        var model = new CountryLanguageModel();
        model.CountryId = id;
        model.CountryLanguageQuestion = MyService.GetQuestion(x => x.CountryId == id);
        return View(model);
    }

Answer 1

为您的按钮添加type ='button'属性，否则它将表现为提交按钮。

Answer 2

你可以将按钮更改为？

 <button class="btn btn-success" id="editLanguage">Edit</button>

到

<a href="/Country/LanguageEdit?id=@Model.CountryId" class="btn btn-success" />

更多信息

如果你想获取某些HTML，请使用HTTPGET而不是HTTPPOST。如果要发送某种信息，请使用HTTPPOST，该服务器应该例如保存。如果要渲染某种视图（例如获取新视图），请使用HTTPGET，
您的操作要求'MyModel模型'不是ID。

Answer 3

根据您的评论，您可能会遇到以下行为：

为什么在页面加载时被触发，我根本没有点击按钮。

当你的javascript代码不在按钮点击事件内，而是在任何其他事件内，如文档就绪或页面加载..etc。

请仔细检查javascript事件，肯定会找到解决方案的方向。

经过检查，如果你，仍然有同样的问题。请向我们展示您的javascript，以便更进一步帮助您

由于

KARTHIK

剃刀：按钮点击未正确触发

3 个答案: