通过引导模式对话框结果重定向浏览器的 ASP.Net MVC 文件上传

Posted 2023-05-08

【中文标题】通过引导模式对话框结果重定向浏览器的 ASP.Net MVC 文件上传

【英文标题】：ASP.Net MVC File Upload via Bootstrap Modal Dialog results redirect browser

【发布时间】：2018-12-26 11:04:48

【问题描述】：

我在引导模式对话框 (Bootstrap 4) 上有一个带有少量文本字段的基本表单和一个文件上传控制器。以下是我的代码：

型号：

public class DemoContent

    public int Id  get; set; 
    [Required]
    public string Name  get; set; 

    [RegularExpression("([0-9]+)",ErrorMessage = "Age must be numbers only")]
    public int Age  get; set; 

    [EmailAddress]
    public string Email  get; set; 

    [DataType(DataType.Upload)]
    [Display(Name = "Image")]
    public HttpPostedFileBase ImageUrl  get; set; 

javascript

  $(function() 
        $("a[data-modal=demoPopup]").on("click", function () 
            $("#demoModalContent").load(this.href, function () 
                $("#demoModal").modal( keyboard: true , "show");

                $("#demoForm").submit(function () 

                    if ($("#demoForm").valid()) 

                        var files = $("ImageUrl").get(0).files;
                        var data = $(this).serialize();
                        data.append("ImageUrl", files[0]);

                        $.ajax(
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (result) 
                                if (result.success) 
                                    $("#demoModal").modal("hide");
                                    location.reload();
                                 else 
                                    $("#MessageToClient").text(result.message);
                                
                            ,
                            error: function () 
                                $("#MessageToClient").text("The web server had an error.");
                            
                        );
                        return false;
                    
                );
            );
            return false;
        );

控制器：

  [HttpPost]
    public ActionResult Create(DemoContent model)
    
        if (model.Age > 55)
        
            var file = model.ImageUrl;
            return Json(new  success = true );
        
        else
        
            return Json(new  success = false,message="Invalid Data" );
        
    

现在，当我打开弹出窗口时，它也可以在我提交表单时与文件一起进入控制器。但问题是一旦服务器返回成功消息，弹出窗口会在空白页面中显示该消息，而不是捕获它并刷新当前页面或显示消息。知道为什么会这样。

源文件链接：https://drive.google.com/open?id=1W3H3kFEpHJWfaf7_UnJI3O5I900GxyC7

【问题讨论】：

尝试添加$("#demoForm").submit(function (e) e.preventDefault 这一定是你的情况

@Rajan 没用

【参考方案1】：

可能是你在 document.ready() 函数中编写了你的​​ javascripts 函数，这就是它再次刷新的原因。

【参考方案2】：

如下编写你的 JavaScript 代码：

$(function() 
        $("a[data-modal=demoPopup]").on("click", function () 
            $("#demoModalContent").load(this.href, function () 
                $("#demoModal").modal( keyboard: true , "show");

                $("#demoForm").submit(function (event)  // Pass the event as parameter to the function.

                    event.preventDefault(); // I have added these two lines
                    event.stopImmediatePropagation();

                    if ($("#demoForm").valid()) 

                        var files = $("ImageUrl").get(0).files;
                        var data = $(this).serialize();
                        data.append("ImageUrl", files[0]);

                        $.ajax(
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (result) 
                                if (result.success) 
                                    $("#demoModal").modal("hide");
                                    location.reload();
                                 else 
                                    $("#MessageToClient").text(result.message);
                                
                            ,
                            error: function () 
                                $("#MessageToClient").text("The web server had an error.");
                            
                        );
                        return false;
                    
                );
            );
            return false;
        );

【讨论】：

可能是你忘记将事件作为参数传递给 sumit() 事件中的函数。

不，它说“未捕获的类型错误：无法读取未定义的属性'文件'”

这里是复制的确切问题drive.google.com/open?id=1W3H3kFEpHJWfaf7_UnJI3O5I900GxyC7

【参考方案3】：

如果你想更新你的模式，我认为你应该安装和使用 Microsoft.Unobtrusive.Validation 和 *.Ajax（我得到你这样的问题......）。有了这个，你可以使用像下面例子这样的代码，它可以更新你的模态（几天前在一个项目中使用过）：

模态：

        @using (Ajax.BeginForm("Login", new  Controller = "Home", area = "" , new AjaxOptions()  OnSuccess = "onSuccessLogin", HttpMethod = "POST", UpdateTargetId = "loginmodalbody", new  id = "loginForm" ))
        
            <div class="modal-body" id="loginmodalbody">
                <div class="text-danger loginfailed"></div>
                <div class="container">
                    <div class="card border-primary mb-3" style="margin: 0 auto;">
                        <div class="card-body">
                            @html.Partial("~/Views/Shared/Modals/LoginModalBody.cshtml")                           
                        </div>
                    </div>
                    <div class="container">
                        <span><a onclick="alert('Leads to pw info')" href="#">Forgot password?</a></span>
                    </div>
                    <br />
                    <button class="btn btn-primary btn-block buttonlogin">Login</button>
                </div>                                      
                <br />
            </div>
        

模态体：

@Html.AntiForgeryToken()

<div class="form-horizontal">
    @Html.ValidationSummary(true, "", new  @class = "text-danger" )

    <div class="form-group">
        <div class="col-lg-12 col-12">
            @Html.EditorFor(model => model.EMail, new  htmlAttributes = new  @class = "form-control", placeholder = "EMail", @id = "inputemail"  )
            @Html.ValidationMessageFor(model => model.EMail, "", new  @class = "text-danger", @id = "dangeremail" )
        </div>
    </div>

    <div class="form-group">
        <div class="col-lg-12 col-12">
            @Html.EditorFor(model => model.Password, new  htmlAttributes = new  @class = "form-control", placeholder = "Passwort", @id = "inputpassword"  )
            @Html.ValidationMessageFor(model => model.Password, "", new  @class = "text-danger", @id = "dangerpassword" )
        </div>
    </div>
</div>

因此，它会在从表单发布中获取数据后更新您的模态正文 - 您在 AjaxOptions 中定义要更新的 id，如上面的 sn-p 所示。

【讨论】：

实际上我需要页面刷新成功。更新模型 n 其他人现在对我来说很好