178 Edit View

示例

Index.cshtml中最后一列之后添加一列Operation

@await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
{ "ColumnName", "Operation" },
{ "DisplayName", "Operation" },
})

 <td style="width:20%">
     <a asp-controller="Persons" asp-action="Edit" asp-route-personId="@person.PersonId">Edit</a>
 </td>

改完以后的Index.cshtml如下：

@model IEnumerable<PersonResponse>
@{
    ViewBag.Title = "Persons";
}

<form asp-controller="Persons" asp-action="Index" method="get">
    <h1>Persons</h1>

    <a asp-controller="Persons" asp-action="Create">Create Person</a>

    <div class="box flex">
        <div class="flex-1">
            <select class="form-input" name="searchBy">
                @foreach (var field in ViewBag.SearchFields)
                {
                    if (field.Key == ViewBag.CurrentSearchBy)
                    {
                        <option value="@field.Key" selected="selected">@field.Value</option>
                    }
                    else
                    {
                        <option value="@field.Key">@field.Value</option>
                    }
                }
                @*Eg: searchBy=PersonName&searchString=abc*@
            </select>
        </div>
        <div class="flex-1">
            <input type="search" id="search" class="form-input"
                   placeholder="Search" name="searchString" value="@ViewBag.CurrentSearchString" />
        </div>
        <div class="flex-1">
            <button class="button button-blue-back">Search</button>
            <a asp-controller="Persons" asp-action="Index" class="link-hover">Clear all</a>
        </div>
    </div>

    <table class="table w-100 mt">
        <thead>
            <tr>
                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData)
                {
                {"ColumnName",nameof(PersonResponse.PersonName)},
                {"DisplayName","Person Name"}
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData)
                {
                {"ColumnName",nameof(PersonResponse.Email)},
                {"DisplayName","Email"}
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.DateOfBirth) },
                { "DisplayName", "Date of Birth" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.Age) },
                { "DisplayName", "Age" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.Gender) },
                { "DisplayName", "Gender" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.Country) },
                { "DisplayName", "Country" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.Address) },
                { "DisplayName", "Address" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", nameof(PersonResponse.ReceiveNewsLetters) },
                { "DisplayName", "Receive News Letters" },
                })

                @await Html.PartialAsync("_GridColumnHeader", new ViewDataDictionary(ViewData) {
                { "ColumnName", "Operation" },
                { "DisplayName", "Operation" },
                })
                
            </tr>
        </thead>
        <tbody>
            @foreach (PersonResponse person in Model)
            {
                <tr>
                    <td style="width:15%">@person.PersonName</td>
                    <td style="width:20%">@person.Email</td>
                    <td style="width:13%">@person.DateOfBirth?.ToString("dd MMM yyyy")</td>
                    <td style="width:9%">@person.Age</td>
                    <td style="width:9%">@person.Gender</td>
                    <td style="width:10%">@person.Country</td>
                    <td style="width:10%">@person.Address</td>
                    <td style="width:20%">@person.ReceiveNewsLetters</td>
                    <td style="width:20%">
                        <a asp-controller="Persons" asp-action="Edit" asp-route-personId="@person.PersonId">Edit</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</form>

右击拷贝Create.cshtml，右击Views粘贴并重命名为Edit.cshtml，将Create字样改成Edit，Button的Create改成Update

@model PersonUpdateRequest

@{
    ViewBag.Title = "Edit Person";
}

<a asp-controller="Persons" asp-action="Index" class="link-hover">Back to Persons List</a>

<h2>Edit Person</h2>

<div class="center-box">
    <form asp-controller="Persons" asp-action="Edit" method="post">
        @*PersonId*@
        <input asp-for="PersonId" type="hidden"/>
        @*PersonName*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="PersonName" class="form-label pt">Person Name</label>
            </div>
            <div class="flex-1">
                <input asp-for="PersonName" class="form-input" />
                <span asp-validation-for="PersonName" class="text-red"></span>
            </div>
        </div>
        @*Email*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Email" class="form-label pt"></label>
            </div>
            <div class="flex-1">
                <input asp-for="Email" type="email" class="form-input" />
                <span asp-validation-for="Email" class="text-red"></span>
            </div>
        </div>
        @*DateOfBirth*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="DateOfBirth" class="form-label pt">Date of Birth</label>
            </div>
            <div class="flex-1">
                <input asp-for="DateOfBirth" type="date" class="form-input" />
                <span asp-validation-for="DateOfBirth" class="text-red"></span>
            </div>
        </div>
        @*Gender*@
        <div class="form-field flex">
            <div class="w-25">
                <label for="Gender" class="form-label pt">Gender</label>
            </div>
            <div class="flex-1">
                @{
                    string[] genders = Enum.GetNames(typeof(GenderOptions));
                }
                @foreach(string gender in genders)
                {
                    <input asp-for="Gender" type="radio" class="ml" value="@gender" />
                    <label for="@gender">@gender</label>
                }
                <span asp-validation-for="Gender" class="text-red"></span>
            </div>
        </div>
        @*Country*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="CountryId" class="form-label pt">Country</label>
            </div>
            <div class="flex-1">
                <select asp-for="CountryId" class="form-input" asp-items="@ViewBag.Countries">
                    <option value="">Please Select</option>
                </select>
                <span asp-validation-for="CountryId" class="text-red"></span>
            </div>
        </div>
        @*Address*@
        <div class="form-field flex">
            <div class="w-25">
                <label asp-for="Address" class="form-label pt"></label>
            </div>
            <div class="flex-1">
                <textarea asp-for="Address" class="form-input"></textarea>
                <span asp-validation-for="Address" class="text-red"></span>
            </div>
        </div>
        @*ReceiveNewsLetters*@
        <div class="form-field flex">
            <div class="w-25">
                
            </div>
            <div class="flex-1">
                <input asp-for="ReceiveNewsLetters" type="checkbox" value="true" />
                <label asp-for="ReceiveNewsLetters" class="form-label"></label>
                <span asp-validation-for="ReceiveNewsLetters" class="text-red"></span>
            </div>
        </div>
        @*SubmitButton*@
        <div class="form-field flex">
            <div class="w-25">
            </div>
            <div class="flex-1">
                <button class="button button-green-back">Update</button>

                <div asp-validation-summary="All" class="text-red"></div>

                @if (ViewBag.Errors != null)

                {
                    <div class="text-red ml">
                        <ul>
                            @foreach (string error in ViewBag.Errors)
                            {
                                <li class="ml">@error</li>
                            }
                        </ul>
                    </div>
                }
            </div>
        </div>
        
        
    </form>
</div>

@section scripts
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            asp-fallback-test="window.jQuery"
            asp-fallback-src="~/jquery.min.js"></script>"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"
            asp-fallback-test="window.jQuery.validator"
            asp-fallback-src="~/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/4.0.0/jquery.validate.unobtrusive.min.js"
            asp-fallback-test="window.jQuery.validator.unobtrusive"
            asp-fallback-src="~/jquery.validate.unobtrusive.min.js"></script>
}

PersonsController.cs中添加两个action，一个httpget一个httppost

[HttpGet]
[Route("[action]/{personId}")] //persons/edit/1
public IActionResult Edit(Guid personId)
{
    PersonResponse? personResponse = _personsService.GetPersonByPersonId(personId);
    if (personResponse == null)
    {
        return RedirectToAction("Index");
    }
    PersonUpdateRequest personUpdateRequest = personResponse.ToPersonUpdateRequest();

    //点击下拉框的时候显示所有Countries
    List<CountryResponse> countries = _countriesService.GetAllCountries();
    ViewBag.Countries = countries.Select(c => new SelectListItem()
    { Text = c.CountryName, Value = c.CountryId.ToString() });

    return View(personUpdateRequest);
}

[HttpPost]
[Route("[action]/{personId}")] //persons/edit/1
public IActionResult Edit(PersonUpdateRequest personUpdateRequest)
{
    PersonResponse? personResponse = _personsService.GetPersonByPersonId(personUpdateRequest.PersonId);
    if (personResponse == null)
    {
        return RedirectToAction("Index");
    }

    if (ModelState.IsValid)
    {
        PersonResponse updatedPerson = _personsService.UpdatePerson(personUpdateRequest);
        return RedirectToAction("Index");
    }
    else
    {
        List<CountryResponse> countries = _countriesService.GetAllCountries();
        ViewBag.Countries = countries.Select(c => new SelectListItem()
        { Text = c.CountryName, Value = c.CountryId.ToString() });
        ViewBag.Errors = ModelState.Values.SelectMany(v => v.Errors).Select(msg => msg.ErrorMessage);
        return View();
    }
}

Gitee获取源码：

https://gitee.com/huang_jianhua0101/asp.-net-core-8.git