Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >当ModelState.IsValid = false重定向时,模态弹出显示不正确

当ModelState.IsValid = false重定向时,模态弹出显示不正确
EN

Stack Overflow用户
提问于 2020-10-15 10:18:09
回答 1查看 778关注 0票数 0

当我的Modal Pop显示在HttpPost上的模型验证失败时,我遇到了问题。当Modal返回数据并失败验证时,我希望屏幕返回模式弹出显示,作为弹出弹出的屏幕,最初生成弹出。所发生的是弹出填充整个屏幕,没有任何格式(也就是说,它不是一个模式弹出在这里)。不过,它确实显示了验证消息,就像未格式化的文本一样。下面是我使用的所有代码片段:

这在我的site.js里

代码语言:javascript
运行
AI代码解释
复制
(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit();
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });
    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });
    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
    $('#CancelModal').on('click', function () {
        return false;
    });  
});

我就是这么叫弹出式的:

代码语言:javascript
运行
AI代码解释
复制
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
     <div class="modal-content"></div>
</div>

<a href="@Url.Action("CreateEdit", new { controller = "Issue", issueid = Model.IssueData.issueId, addedit = "add" })" class="modal-link btn btn-success">Add New Status</a>

这是处理来自Modal PopUp的PopUp的控制器。

代码语言:javascript
运行
AI代码解释
复制
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
    if (ModelState.IsValid)
    {
        //Do Stuff
        return RedirectToAction("edit");

    } else
    {
        return PartialView("_CreateEdit", model);
    }           
}

下面是Modal弹出的内容:

代码语言:javascript
运行
AI代码解释
复制
@model MYAPP.ViewModels.StatusViewModel
<!--Modal Body Start-->

<div class="modal-content">
    <!--Modal Header Start-->
    <div class="modal-header">
        <h4 class="modal-title">@ViewBag.Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <!--Modal Header End-->
    <form asp-action="CreateEdit" asp-controller="Issue" method="post" enctype="multipart/form-data">
        @Html.AntiForgeryToken()

        <div class="modal-body form-horizontal">
            <div class="form-group row">
                @Html.HiddenFor(model => model.addedit)
                @Html.HiddenFor(model => model.IssueID)
                @Html.HiddenFor(model => model.StatusDate)
                @Html.LabelFor(model => model.Status, new { @class = "col-sm-2 col-form-label" })
                <div class="col-sm-10">
                    <textarea asp-for="@Model.Status" class="form-control" rows="10" placeholder="Enter/Update Status">@Model.Status</textarea>

                </div>
            </div>
            <div class="form-group row">
                @Html.LabelFor(model => model.NextStep, new { @class = "col-sm-2 col-form-label" })
                <div class="col-sm-10">
                    <textarea asp-for="@Model.NextStep" class="form-control" rows="10" placeholder="Please enter the next steps here">@Model.NextStep</textarea>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="@Model.ColorCode" class="control-label"></label>
                @Html.DropDownListFor(modelItem => modelItem.ColorCode, new[] {
               new SelectListItem { Text = " ", Value = "" },
               new SelectListItem { Text = "Red", Value = "R" },
               new SelectListItem { Text = "Yellow", Value = "Y" },
               new SelectListItem { Text = "Green", Value = "G" } })

                <span asp-validation-for="@Model.ColorCode" class="text-danger"></span>
            </div>
            <div>
                <table class="statustable">
                    <tr class="statustablerow">
                        <th></th>
                        <th>Previous Status</th>
                        <th>Previous Next Steps</th>
                    </tr>
                    <tr class="statustabledata">
                        @if (@ViewBag.LastColorCode == "R")
                        {
                            <td rowspan="2" width="2%" style=" background-color:red"></td>
                        }
                        else if (@ViewBag.LastColorCode == "Y")
                        {
                            <td rowspan="2" width="2%" style="background-color: yellow"></td>
                        }
                        else if (@ViewBag.LastColorCode == "G")
                        {
                            <td rowspan="2" width="2%" style="background-color: green"></td>
                        }
                        else
                        {
                            <td rowspan="2" width="2%" style="background-color: gray"></td>
                        }
                        <td width="20%">Previous Status:</td>
                        <td width="78%">@ViewBag.LastStatus</td>
                    </tr>
                    <tr class="statustabledata">
                         <td>Previous Next Steps:</td>
                        <td>@ViewBag.LastNextSteps</td>
                    </tr>

                </table>
            </div>
        <!--Modal Footer Start-->
        <div class="modal-footer">
            <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
            <button class="btn btn-success relative" id="btnSubmit" data-save="modal">
                <i class="loader"></i>
                Submit
            </button>
        </div>
        <div class="row">
            &nbsp;
        </div>
 
        <!--Modal Footer End-->
    </form>

</div>
<script type="text/javascript">
    $(function () {
    });
</script>

<!--Modal Body End-->  

当验证失败时,如何使屏幕恢复到用弹出窗口显示页面?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-15 22:16:49

您应该通过ajax提交表单,并用返回的数据( partialview的html)替换该模式,否则它将直接返回partialview作为一个新视图。

我对您的代码做了一些更改,您可以参考下面的示例:

模型:

代码语言:javascript
运行
AI代码解释
复制
public class StatusViewModel
{
    public string addedit { get; set; }
    public int IssueID { get; set; }
    public DateTime StatusDate { get; set; }
    [Required]
    public string Status { get; set; }
    [Required]
    public string NextStep { get; set; }
    [Required]
    public string ColorCode { get; set; }
}

Edit.cshtml:

代码语言:javascript
运行
AI代码解释
复制
<div id="modal-container" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>
<a href="@Url.Action("CreateEdit", new { controller = "Issue", issueid = "1", addedit = "add" })" class="modal-link btn btn-success">Add New Status</a>


@section scripts{
    <script>
        $('body').on('click', '.modal-link', function () {
            var actionUrl = $(this).attr('href');
            $.get(actionUrl).done(function (data) {
                $('body').find('.modal-content').html(data);
            });
            $(this).attr('data-target', '#modal-container');
            $(this).attr('data-toggle', 'modal');
        });

        $('body').on('click', '.relative', function (e) {
            e.preventDefault();
            var form = $(this).parents('.modal').find('form');
            var actionUrl = form.attr('action');
            var dataToSend = form.serialize();
            $.post(actionUrl, dataToSend).done(function (data) {
                $('body').find('.modal-content').html(data);
            });
        })

        $('body').on('click', '.close', function () {
            $('body').find('#modal-container').modal('hide');
        });

        $('#CancelModal').on('click', function () {
            return false;
        });
    </script>
}

_CreateEdit.cshtml:

代码语言:javascript
运行
AI代码解释
复制
@model StatusViewModel
<!--Modal Body Start-->
@{ 
    ViewBag.Title = "Edit";
}

<div class="modal-header">
    <h4 class="modal-title">@ViewBag.Title</h4>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
</div>

<div class="modal-body form-horizontal">
    <form asp-action="CreateEdit" asp-controller="Issue" method="post" enctype="multipart/form-data">
        @Html.AntiForgeryToken()
        <div class="form-group row">
            @Html.HiddenFor(model => model.addedit)
            @Html.HiddenFor(model => model.IssueID)
            @Html.HiddenFor(model => model.StatusDate)
            @Html.LabelFor(model => model.Status, new { @class = "col-sm-2 col-form-label" })
            <div class="col-sm-10">
                <textarea asp-for="@Model.Status" class="form-control" rows="10" placeholder="Enter/Update Status">@Model.Status</textarea>
                <span asp-validation-for="@Model.Status" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group row">
            @Html.LabelFor(model => model.NextStep, new { @class = "col-sm-2 col-form-label" })
            <div class="col-sm-10">
                <textarea asp-for="@Model.NextStep" class="form-control" rows="10" placeholder="Please enter the next steps here">@Model.NextStep</textarea>
                <span asp-validation-for="@Model.NextStep" class="text-danger"></span>
            </div>
        </div>
        <div class="form-group">
            <label asp-for="@Model.ColorCode" class="control-label"></label>
            @Html.DropDownListFor(modelItem => modelItem.ColorCode, new[] {
            new SelectListItem { Text = " ", Value = "" },
            new SelectListItem { Text = "Red", Value = "R" },
            new SelectListItem { Text = "Yellow", Value = "Y" },
            new SelectListItem { Text = "Green", Value = "G" } })

            <span asp-validation-for="@Model.ColorCode" class="text-danger"></span>
        </div>
        <div>
            <table class="statustable">
                <tr class="statustablerow">
                    <th></th>
                    <th>Previous Status</th>
                    <th>Previous Next Steps</th>
                </tr>
                <tr class="statustabledata">
                    @if (@ViewBag.LastColorCode == "R")
                    {
                        <td rowspan="2" width="2%" style=" background-color:red"></td>
                    }
                    else if (@ViewBag.LastColorCode == "Y")
                    {
                        <td rowspan="2" width="2%" style="background-color: yellow"></td>
                    }
                    else if (@ViewBag.LastColorCode == "G")
                    {
                        <td rowspan="2" width="2%" style="background-color: green"></td>
                    }
                    else
                    {
                        <td rowspan="2" width="2%" style="background-color: gray"></td>
                    }
                    <td width="20%">Previous Status:</td>
                    <td width="78%">@ViewBag.LastStatus</td>
                </tr>
                <tr class="statustabledata">
                    <td>Previous Next Steps:</td>
                    <td>@ViewBag.LastNextSteps</td>
                </tr>

            </table>
        </div>
        <!--Modal Footer Start-->
        <div class="modal-footer">
            <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
            <input type="submit" class="btn btn-success relative" id="btnSubmit" data-save="modal" value="Submit">
        </div>
        <div class="row">
            &nbsp;
        </div>
    </form>
</div>

控制器:

代码语言:javascript
运行
AI代码解释
复制
public IActionResult Edit()
{
    return View();
}

[HttpGet]
public ActionResult CreateEdit(int issueid, string addedit)
{
    var model = new StatusViewModel
    {
        Status = "AAAAA",
        NextStep = "BBBBB"
    };
        
    ViewBag.LastColorCode = "R";
    ViewBag.LastStatus = "CCCC";
    ViewBag.LastNextSteps = "DDDD";

    return PartialView("_CreateEdit", model);
        
}

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
    if (ModelState.IsValid)
    {
        //Do Stuff
        return RedirectToAction("edit");

    }
    else
    {
        return PartialView("_CreateEdit", model);
    }
}

结果:

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64377539

复制
相关文章
创建联系表单页面并通过 Ajax 提交表单请求数据
回顾下上篇教程更新主题后的博客系统,可以看到顶部右上角导航菜单有两个链接,分别指向关于页面和联系表单页面:
学院君
2020/09/11
2.3K0
submit方法用于提交表单并触发表单的onsubmit事件_submit表单提交
w3c 修改代码看效果的实现方式。 他们的提交按钮是 input type=“button”, 而不是type=”submit”方式,所有 form上的 onsubmit事件是无效的。 是onclick点击去提交的代码的 ‘document.getElementById(“tryitform”).submit();’
全栈程序员站长
2022/11/10
2K0
submit方法用于提交表单并触发表单的onsubmit事件_submit表单提交
JS创建表单提交备份
//保存 function saveFT() { var data = { createDate: GetDateStr(0), name: $("#txtName").val(), gender: "未知", mobile: $("#txtTel").val(), email1: "null@null.com", inter
用户1055830
2018/01/18
11.8K0
表单提交原理_防止表单重复提交
<form>标签的属性enctype设置以何种编码方式提交表单数据。可选的值有三个:
全栈程序员站长
2022/11/08
5.6K0
表单提交
在html中经常用到<form>标签。而我们在使用过程会经常这样用<input name=”sub” type=”submit” value=”提交” /> 也就是说当我们点击提交的时候会执行<form action=”file.php” method=”get” id=”se” name=”se”>action的动作(例子是提交到file.php页面)方法是get。 当没有提交按钮时而是用一个热图加onclick属性来完成,我们可以这样用 <form id=”search” name=”search”
苦咖啡
2018/05/07
4.6K0
vue的form表单提交_axios提交表单
利用v-model能比较便捷地上传用户信息的数据,不用一个个参数地拼接。直接在data根据要传的字段定义一个对象,
全栈程序员站长
2022/11/10
6.8K0
js form表单提交(jsp form表单提交方式)
最近工作比较忙,着急上线,写个简单的东西吧 url为你要提交的地址 params 为你提交的参数
全栈程序员站长
2022/07/30
15.1K0
html表单提交
1、只能为input、textarea、select三类类型的标签。只有这些标签用户才可能修改值,<label>、<p>、<font>等标签仅供显示用,没有提交到服务器的必要。当input=submit的时候,只有被点击的按钮的value才会被提交;
tandaxia
2018/09/27
5.5K0
回车提交表单
我们在页面开发中经常会写一些表单,但身为一个懒人,肯定是懒得点提交按钮的,我一般直接按回车提交
阿超
2022/08/17
4.1K0
django表单提交
HTML表单是网站交互性的经典方式。 本章将介绍如何用Django对用户提交的表单数据进行处理。
py3study
2018/08/03
4.1K0
java表单提交方法_表单提交的几种方式[通俗易懂]
说明:用户提交按钮或图像按钮时,就会提交表单。使用或都可以定义提交按钮,只要将其特性的值设置为“submit”即可,而图像按钮则是通过的type特性值设置为”image”来定义的。因此,只要我们单击一下代码生成的按钮,就可以提交表单。
全栈程序员站长
2022/09/30
5.2K0
异步提交表单_js异步提交表单并回调
所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下:
全栈程序员站长
2022/11/17
12K0
异步提交表单_js异步提交表单并回调
JavaScript表单提交
表单提交在前端编程阶段中也是一个重点。它是由页面数据保存到后台数据库的重要枢纽,通过表单提交的方式将数据上传到数据库进行保存。同时这些数据也包含用户信息、统计信息、日志信息等等。 数据的信息不同,上传的方式也不同。在JavaScript中有四种种表单提交的方式: 一、 Form表单手动提交(get与post) 在没有任何Js代码的影响下,Form表单本身是自带提交功能的。在form元素标签上有两个属性: (1) action:设置表单提交的路径(URL) (2) method:设置表单提交的方式 表单提交的路径分为两种: (1) 相对路径:指站点内的文件,就是本地文件。 (2) 绝对路径:指其它站点,就比如从本站点到百度。 设置表单提交方式属性的值有两种:get提交和post提交。如果method不指名提交方式则默认为get提交。 这两种提交方式需要分别对应不同情况使用: (1) 相对于post提交而言,get提交更简单也更快,但是传输的容量小,在提交表单时,所有的信息都会暴露在url上,并不安全,通常用来获取数据。 (2) post提交方式能够传输的容量基本上是无穷的,而且提交的数据直接在后台进行处理,保证了数据的安全性,而且在更新数据传输大量数据、传输音频图片或者特殊符号等情况时,就只能使用post,而非get。 通常情况下,我们会取消Form表单的自动提交功能,通过一个onsubmit属性赋值为return false。
全栈程序员站长
2022/11/08
5.1K0
JavaScript表单提交
python表单提交
python写爬虫模拟表单提交的库其实有很多,我使用的是Requests库进行简单的表单提交。
py3study
2020/01/07
4.8K0
表单提交步骤
1.项目名称exam,先创建javaweb,然后创建一个包:tzzy1902320136 2.创建一个表格
花狗Fdog
2021/01/06
1.6K0
Vue 提交表单
axios默认提交格式;传递到后台的将是序列化后的json字符串,格式为JSON格式
全栈程序员站长
2022/11/08
2.3K0
node表单提交POST提交
前几天给大家介绍了使用node的提交(get)获取到表单提交的内容,get提交的参数查询部分(query)可以获得到,由于get提交的内容在url显示,而post提交处理机制,为了保障安全性不显示在url中,下面案例介绍下post提交案例!
十月梦想
2018/08/29
4.5K0
layui表单提交数据_vue表单值无变化不让提交
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/08
1.8K0
form实现表单提交的各种方法(表单提交源码)
这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非常多非常灵活了,比如可以把它加入到任意一个标签的onclick事件中:
全栈程序员站长
2022/08/01
5.8K0
form表单如何提交数据(表单中提交请求默认方式)
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type=’submit’>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。
全栈程序员站长
2022/07/28
5.9K0

相似问题

如何在HP UFT - ApiTest中通过自定义代码获取测试变量

22

Django APITest在get请求中不返回任何内容的情况

11

apitest.cybersource.com新密钥故障

13

用HP laserJet 10 HP在.Net中打印

12

从HP service Manager调用TIBCO web服务导致错误

17
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档