Razor page independently post form to each controller

user_1112245 0
Viewed 47

In my asp.net razor project, I have page containing multiple forms. But if I post to table update, the main info form data change would be lost. How can I submit table without changing my other form data?

(I guess I can try to make the page using js+ajax without razor binding, but I will first try the razor solution)

<table>
    @for (int i = 0; i < @Model.data.Test.Count(); i++)
    {
        <tr>
            <td>
                <div>@Html.DisplayFor(model => model.data.Test[i])</div>
            </td>
            <td>
                <form method="post" class="container" asp-page-handler="delete">
                    <input type="hidden" name="id" value="@i" />
                    <input type="submit" value="Delete" class="btn btn-primary" />
                </form>
            </td>
        </tr>
    }
</table>

//the main user info form
<form method="post">

<div class="form-group">
    <label asp-for="data.UserName" class="control-label"></label>
    <input asp-for="data.UserName" class="form-control" readonly />
    <span asp-validation-for="data.UserName" class="text-danger"></span>
</div>

 ... other inputs.

<div class="form-group">
    <input type="submit" value="Save" class="btn btn-primary" />
</div>
asp.net-core razor asp.net ajax
1 Answers

You can try to use ajax and use event.preventDefault(); which can prevent reloading the page.Here is a demo:

<form method="post" id="myForm">

   <div class="form-group">
    <label asp-for="data.UserName" class="control-label"></label>
    <input asp-for="data.UserName" class="form-control" readonly />
    <span asp-validation-for="data.UserName" class="text-danger"></span>
</div>

 ... other inputs.

<div class="form-group">
    <input type="submit" value="Save" class="btn btn-primary" onclick="Save()" />
</div>
</form>

js:

function Save()
        {
            event.preventDefault();
             $.ajax({
                 type: "POST",
                 data: $("#myForm").serialize(),
                url: '/.../...',
            }).done(function (result) {
                
            });

        }
user_135937360
Related