Как отобразить частичные виды бритвы на основе различных условий отправки HTML-форм?

Question

Моя страница содержит несколько таких частичных страниц.Предположим, есть два частичных представления.И оба эти представления имеют свои собственные формы.

<div class="row">
@await Html.PartialAsync("_partialNameInfo")       //For First and Last 
Name                
@await Html.PartialAsync("_partialAddressInfo")   // For address info
</div>

partalNameInfo выглядит примерно так:

<form id="nameinfo">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
<input type="submit" onclick="checknames()" value="Submit"/>
<form>

//Also, there is JS function checknames similar to this which stores names in json format

<script type="javascript">
function checknames() {      
var namedetails= 
{
   fname : document.getelementbyid .... // gets firstname and stores
   lname : document.getelementbyid .... // gets lastname and stores
};
</script>


//_partialAddressInfo looks similar to this:

<form id="addressinfo">
<input type="text" id="StreetName"/>
<input type="text" id="ApartmentNumber"/>
<input type="submit" value="Submit"/>
<form>

То, что я хочу, чтобы это было похоже:

1. По умолчанию загружается только первый просмотр страницы, т. Е. _PartialNameInfo

2. Когда проверка правильности форм _partialNameInfo выполняется, то при нажатии на кнопку «Отправить» она должна передавать значения контрольных имен, а такжеотобразить другое представление _partialAddressInfo в качестве действительного просмотра первой страницы.

A.Как я могу загрузить только страницу _partialNameInfo по умолчанию?И не отображать другую страницу B. Как проверить, правильно ли была отправлена ​​форма первой страницы, чтобы можно было отобразить другую страницу?

C.Как передать информацию, полученную из контрольных имен, в другое представление?

Answer 1

Вы можете использовать return PartialView() для отображения другой страницы, когда первая страница была правильно отправлена. Обратите внимание, что тип input должен быть button, а не submit.

Вот простой обходной путь, подобный приведенному ниже:

1.Модель:

public class NameInfo
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Address Address { get; set; }
}
public class Address
{
    public string StreetName { get; set; }
    public int ApartmentNumber { get; set; }
}

2._partialNameInfo.cshtml:

<form id="nameinfo">
<input type="text" id="firstname" />
<input type="text" id="lastname" />
<input type="button" onclick="checknames()" value="Submit" />

3._partialAddressInfo.cshtml:

@model Address
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.StreetName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ApartmentNumber)
            </th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(model => model.StreetName)
                </td>
                <td>
                    @Html.DisplayFor(model => model.ApartmentNumber)
                </td>
            </tr>           
    </tbody>
</table>

4.Index.cshtml:

<div id="partial1">
    @await Html.PartialAsync("_partialNameInfo")
</div>
<div id="partial2">
</div>

@section Scripts{ 
<script>
    function checknames() {
        var flag;
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        var data = { firstname, lastname };
        $.ajax({
            url: "/Home/Test",
            type: "POST",
            data :data,
            dataType: 'html',
            success: function (result) {
                $("#partial2").html(result);               
            }
        })  
    }
</script>
}

5.Контроллер:

public IActionResult Index()
{
    return View();
}
[HttpPost]
public ActionResult Test(NameInfo nameInfo)
{
    var model = new List<NameInfo>()
    {
        new NameInfo(){ Id=1,FirstName="a",LastName="b",Address=new Address(){ StreetName="aa",ApartmentNumber=1001} },
        new NameInfo(){ Id=2,FirstName="c",LastName="d",Address=new Address(){ StreetName="bb",ApartmentNumber=1002} }
    };
    var data = model.Where(m => m.FirstName == nameInfo.FirstName).Where(m => m.LastName == nameInfo.LastName).Select(m => m.Address).FirstOrDefault();
    return PartialView("_partialAddressInfo",data);
}

6.Результат: