使用 htmlbeginform 加載局部視圖的視圖

Question

我有一個包含一堆組件的項目，其中任何一個組件都可以使用更多選項進行更新。 所以我認為最好有一個下拉菜單，允許你選擇你想要添加選項的組件，然后它可以加載一個部分視圖，其中包含你想要添加選項的特定組件的輸入字段，然后按提交。 但它似乎不能很好地與 HTML.BeginForm 一起使用，我不確定為什么。 更具體地說，我不知道是因為它是部分視圖還是我在開始表單中搞砸了一些東西。

編輯：抱歉，我沒有解釋運行時會發生什么。 當我按下提交按鈕時沒有任何反應。 什么也沒有發生，它不會發送到局部視圖的 post 部分。

這是選擇組件的頁面：

<p></p>
<h3>What needs to be added?</h3>
<div id="match-alert" class="alert" role="alert"></div>
<select class="form-control" id="Type-Selector" name="Type-Selector">
        <option value="-1">Select Option</option>
        <option value="1">New Manufacturer</option>
        <option value="2">New Model<option>
        <option value="3">New Series</option>
</select>

<div id="partialPlaceHolder" style="display:none;"></div>

@section Scripts{
    <script src="http://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
           $("#Type-Selector").change(function () {
                var selectedID = $(this).val();

                $.get("/Components/SelectedItem/" + selectedID, function (data) {
                    $('#partialPlaceHolder').html(data);
                    $('#partialPlaceHolder').fadeIn('fast');

        })
    </script>
    }

Selected Item 將傳回有問題的部分視圖（到目前為止我只構建了一個）：

     public ActionResult SelectedItem(int ID)
        {


            switch (ID)
            {
                case 1:
                    return PartialView("_UpdateManufacturer");
            }

            return View();
        }

它返回的部分視圖：

@model AutoDealer.ViewModels.UpdateManufacturerViewModel

<table id="ManufactureEntry"  class="d-flex justify-content-center" style="width:20%">
    <thead>
        <tr>
            <th>New Manufacturer</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            @using (Html.BeginForm("_UpdateManufacturer","Components",  FormMethod.Post))
            {
                <td>@Html.TextBoxFor(Model => Model.Manufacturer.cDescription )</td>
                <td><input id="submit" type="submit" value="Add" /></td>
            }
        </tr>
    </tbody>
</table>

Answer 1

所以我找到了一個解決方案，但我不知道為什么這種改變有效。 我會發布我所做的更改。 我已將 Html.BeginForm 移至表格組件上方。 這是代碼更改：

@model AutoDealer.ViewModels.UpdateManufacturerViewModel

@using (Html.BeginForm("_UpdateManufacturer","Components",  FormMethod.Post))
{
    <table id="ManufactureEntry"  class="d-flex justify-content-center" style="width:20%">
        <thead>
            <tr>
                <th>New Manufacturer</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                    <td>@Html.TextBoxFor(Model => Model.Manufacturer.cDescription )</td>
                    <td><input id="submit" type="submit" value="Add" /></td>
            </tr>
        </tbody>
    </table>
}

現在，當在主選擇頁面加載局部視圖時，提交按鈕起作用。 我無法弄清楚的是為什么這個修復會這樣做。 如果有人猜測或理解為什么我真的很想知道，因為當我自己加載局部視圖時，舊代碼有效。 只有在其他頁面中加載部分視圖時它才不起作用。