如何在 .Net Core 中提交表单而不离开当前视图并保留当前模型

Posted 2023-03-31

【中文标题】如何在 .Net Core 中提交表单而不离开当前视图并保留当前模型

【英文标题】：How can I submit a form in .Net Core without leaving the current view and keeping the curent model

【发布时间】：2021-07-11 15:58:29

【问题描述】：

我有一个带有表单的模式，在我提交后我想将某些内容更新到数据库中，而不会离开或刷新当前视图，也不会丢失当前注入的模型。

让我快速解释一下。我有一个有两个按钮的个人资料页面。一个I have blocked your car! 和另一个Unblock my car!。当我按下其中一个按钮时，会弹出一个模式，并要求您输入一些表单，在我提交后，我想在我按下按钮之前的个人资料页面上返回。我尝试了很多东西，但遇到了一些问题：

1.在我登顶表格后，注入的模型变为NULL 2.Void 动作让我进入一个空白页面 3.提交后没有调用动作，因为我有一个断点，模型也为空 4.没有任何作用

我基本上想要：当我打开模式并输入数据时，在我提交它之后，应该调用控制器中的一个方法来更新数据库中的某些内容而不更改视图或刷新它。之后我想返回到我按下按钮之前的个人资料页面 控制器：

using AspNetCoreHero.ToastNotification.Abstractions;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Threading.Tasks;
using UnblockMe.Models;
using UnblockMe.Services;

namespace UnblockMe.Controllers

    public class ProfileController : Controller
    
        private readonly ILogger<ProfileController> _logger;
        private readonly IUserService _userService;
        private readonly INotyfService _notyf;
        private Users _curentUser;
        public ProfileController(ILogger<ProfileController> logger, INotyfService notyf,IUserService userService)
        
            _logger = logger;
            _userService = userService;
            _notyf = notyf;

        

        [Route("Profile/id")]
        public IActionResult Index(string id)
          

            return View(_userService.GetUserById(id));
        
        

   
        public void BlockedYouAction(string Contact)
        
       
        
    
        public void BlockedMeAction(string Contact)
        

         
        
       
    

查看：

@model Users
@using Microsoft.AspNetCore.Identity
@using UnblockMe.Services
@inject SignInManager<Users> SignInManager
@inject UserManager<Users> UserManager
@inject IUserService _userService
@inject ICarsService _carsService
<p>@Model.FirstName - @Model.LastName</p>
<p>@Model.PhoneNumber</p>
<p>@Model.Email</p>
<div class="container">
    @if (SignInManager.IsSignedIn(User))
    
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#UnblockMe">
            Unblock me!
        </button>
        <div class="modal fade" id="UnblockMe" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Unblock Me!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="form" asp-controller="Profile" asp-action="BlockedYouAction">
                            <p>Contact Method:</p>
                            <label for="ContactSMS">SMS</label>
                            <input type="radio" name="Contact" value="SMS" id="ContactSMS" checked />
                            <label for="ContactEmail">Email</label>
                            <input type="radio" name="Contact" value="Email" id="ContactEmail" />

                            <label for="cars">Choose a car:</label>
                            <select name="mycars" id="mycars">
                                @foreach (var element in _carsService.GetCarsList(_userService.GetLoggedInUser()))
                                
                                    <option value="@element.LicensePlate">@element.LicensePlate</option>
                                


                            </select>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary" id="myLink">Send</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#BlockedYou">
            I have blocked you!
        </button>
        <div class="modal fade" id="BlockedYou" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">I have blocked you!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @html.Partial("BlockedYou_parital", Model)
                    </div>

                </div>
            </div>
        </div>

    
</div>
<script>
    $("#form").submit(function(e) 
    e.preventDefault();
);
</script>

目前我正在测试我已经阻止了你！按钮，所以不要看另一个。 我还想提一下，我的个人资料路线是 Profile/user id

【参考方案1】：

最简单的方法是使用ajax

@section Scripts 
<script type="text/javascript">
 $(document).ready(function () 

 $(document).on("click", "#blockYouBtn", function (e) 
        e.preventDefault();
        e.stopImmediatePropagation();

        blockYou();
    );

function blockYou() 

      var contact= //your code

        $.ajax(
            url: '/profile/BlockedYouAction',
            type: 'POST',
            data: Contact:contact,
            success: function (result) 
             return true;
            ,
            error: function (xhr, exception) 
           //error code
                return false;
            
        );
;
);

</script>

我不知道你屏蔽后需要什么。现在它什么也不做，但它可以例如返回一个局部视图。模型和其他一天都不会改变。

【讨论】：

按下阻止按钮后，我想进入控制器，更新数据库中的那辆汽车（字段：IsBlockedBY = 我的一辆车的车牌）并向他发送短信/电子邮件和回到它的个人资料，就像什么都没发生一样......我只想打开模式......提交表单......然后模式应该消失，我应该在我的眼前看到相同的个人资料页面

使用 ajax 达到控制器动作。在操作内部运行代码以更改数据库并返回 Ok 或 BadRequest。包含所有数据的所有视图都将保持不变。

如果还是有问题，可以在开始后多放一些代码

伙伴，我想通了语法..你能帮帮我吗？

如果您只有一个字符串参数 - 联系此代码应该可以正常工作。但如果您有不同的参数，请更新您的问题。