ASP.NET Core MVC-表单提交数据成功后运行客户端脚本/函数

Question

我有生成表单的代码。

    <form asp-controller="home" asp-action="EditClient" method="post" class="mt-3" id="EditClientForm">
                <div class="form-group row">
                    <label asp-for="Client.Client" class="col-sm-3 col-form-label"></label>
                    <div class="col-sm-8">
                        <input asp-for="Client.Client" class="form-control" placeholder="Client Name" id="editClient">
                    </div>
                </div>
                <div class="form-group row">
                    <label asp-for="Client.ClientCode" class="col-sm-3 col-form-label">Client Code</label>
                    <div class="col-sm-8">
                        <input asp-for="Client.ClientCode" class="form-control" placeholder="Client Code" id="editClientCode">
                    </div>
                    @*<div class="col-sm-4">
                            <div class="custom-checkbox" style="padding: 0.375rem 0.1rem;">
                                <label asp-for="ClientActive">
                                    <input asp-for="ClientActive" /> Active
                                </label>
                            </div>
                        </div>*@
                </div>
                <button type="submit" class="btn btn-primary">Save</button>
            </form>

这是控制器中的代码

[HttpPost]
    public async Task<IActionResult> EditClient(SetupViewModel newModel)
    {
            Employee employee = await employeeRepository.GetEmployeeByPhoneNumber(((ClaimsIdentity)User.Identity).FindFirst(AccountConstant.PhoneNumber).Value);
            var model = HttpContext.Session.GetComplexData<SetupViewModel>("SetupModel");
            foreach (var project in model.Projects)
            {
                project.ClientCode = newModel.Client.ClientCode;
                project.Client = newModel.Client.Client;
                await projectRepository.Update(project, employee);
            }
            model.Client.Client = newModel.Client.Client;
            model.Client.ClientCode = newModel.Client.ClientCode;

            HttpContext.Session.SetComplexData("SetupModel", model);
            return RedirectToAction("Setup", "Home");

    }

提交过程成功后，我想展示一个成功模式。 怎么做？ 我有搜索使用Ajax，但我不是很了解。

Answer 1

有几种方法可以做到这一点。 对于我正在从事的一个小项目来说，一个简单的机制就足够了，我使用的是TempData。 我有一个控制器类的静态扩展方法。 我只需添加一条消息并在操作中显示，然后在所有视图使用的布局中显示

/// <summary>
/// Add a message to a list of messages in Tempdata
/// </summary>
/// <param name="c"></param>
/// <param name="message"></param>
public static void AddTempDataMessage(this Controller c, string message)
{
    // assume a new list
    var messages = new List<string>();

    // check if object already exists
    object m = c.TempData.Peek("Messages");

    // object stored as a string array for simplicity
    if (m != null && m is string[] v)
    {
        // set existing array to the list
        messages = v.ToList();
    }

    messages.Add(message);

    // Store as a simple array since using a List<string> changes to string[] on redirect (Microsoft bug?)
    c.TempData["Messages"] = messages.ToArray();
}

示例操作用法

    if (imageExists != null)
    {
        this.AddTempDataMessage("Image already in set");
        return RedirectToAction("EditImageSet", new { imageSetId });
    }

在共享布局视图中的用法

// A list of messages to display
List<string> Messages()
{
    // assume a new list
    var messages = new List<string>();

    // check if already exists
    object m = TempData["Messages"];

    // stored as an array of strings since a redirect changes a list to an array so we stored it as an array
    if (m != null && m is string[])
    {
        // set existing
        messages = ((string[])m).ToList();
    }

    return messages;
}



        @* Messages *@
        <div class="text-danger">
            @foreach (var m in Messages())
            {
                <span class="mr-2">@(m + ".")</span>
            }
        </div>