MVC Ajax dropdownlist網址更改

Question

我是ajax的新手，需要幫助。 一旦選擇了第一個下拉列表，該腳本就會填充第二個下拉列表。 使用從數據庫獲取數據的GetStates操作，它可以正常工作。

<script type="text/javascript">
$(document).ready(function () {
    $("#CountriyID").change(function () {
        var abbr = $("#CountriyID").val();

        $.ajax({
            url: "/SetUp/GetStates",
            data: { countryCode: abbr },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {
                var items = "";
                $.each(data, function (i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });

                $("#StateID").html(items);
            }
        });
    });
});

</script>

這是我正在努力的觀點

@using (Html.BeginForm("Index", "SetUp", FormMethod.Post))
{
    <form action="" method="post">
        <input type="submit" name="action:AddCity" value="Add" />
    </form>
    <div class="editor-field">@Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
     <div class="editor-field">@Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>
}

如果需要添加城市，請單擊“提交”按鈕，然后該按鈕將采取正確的措施。 當我填充下拉列表時，發生了問題。 填充后，“城市”按鈕不再響應。 看起來url獲取堆棧位於“ / SetUp / GetStates”，並且我無法再對表單執行任何操作。

請讓我知道我在做什么錯以及在哪里看看？ 提前致謝。

Answer 1

請嘗試以下代碼，希望對您有所幫助：

<form action="" method="post">

    <div class="editor-field">@Html.DropDownListFor(model => model.CountriyID, new SelectList(Model.Countries, "ID", "Text"))</div>
     <div class="editor-field">@Html.DropDownListFor(model => model.StateID, new SelectList(Model.States, "ID", "Text"))</div>

<input type="submit" name="action:AddCity" value="Add" />
    </form>

由於下拉列表必須進入標簽，因此理想情況下，提交必須位於標簽的最后位置。