view that loads a partialview with an htmlbeginform

Question

I have a project with a bunch of components and any one of those components could be updated with more options. So I thought having a dropdown that allowed you to select the component you wanted options added to would be best, then it could load a partial view that had the entry field for the particular component you wanted an option added to, then press submit. But it doesn't appear to be playing well with the HTML.BeginForm and I'm unsure as to why. More specifically I don't know if it's because it's a partial view or if I messed up something with the begin form.

Edit: sorry I didn't explain what happens when this runs. Nothing happens when I press the submit button. Just nothing happens, it doesn't send to the post portion of the partialview.

Here is the page to select a component:

<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>
    }

The Selected Item will pass back the partial view in question (I only have one built so far):

     public ActionResult SelectedItem(int ID)
        {


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

            return View();
        }

The Partial view it returns:

@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

So I've found a solution but I don't know WHY the change worked. I'll post the change I made. I've moved the Html.BeginForm to above the table component. here is the code change:

@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>
}

Now when the partialview loads in the main select page, the submit button works. The thing I can't figure out is why this fix would do this. If anyone has a guess or an understanding of why I'd really like to know because when I load the partial view by itself, the old code WORKED. it only didn't work when the partialview loaded within the other page.