来自MVC控制器的JQuery弹出窗口

我刚刚开始探索asp mvc和jquery

我有一个简单的表单，有两个字段，一个日期和一个金额

我试图实现的行为是，在提交表单时，如果我的数据库中不存在该记录，则添加该项。如果已经存在，则发出警告并要求用户确认。如果用户继续，则覆盖现有记录

这是我的分数

<% using (Html.BeginForm())
       { %>
    <div>
        <%:Html.LabelFor(mod => Model.bal.Date) %>
    </div>
    <div>
        <%: Html.TextBoxFor(mod => Model.bal.Date)%>
        <%:Html.ValidationMessageFor(mod => Model.bal.Date)%>
    </div>
    <div>
        <%: Html.LabelFor(mod => Model.bal.Amount)%>
    </div>
    <div>
        <%: Html.TextBoxFor(mod => Model.bal.Amount)%>
        <%: Html.ValidationMessageFor(mod => Model.bal.Amount)%>
    </div>
    <p>
        <input type="submit" value="Create" />

我的问题是如何在我的控制器中显示Jquery弹出窗口并从中获取结果

我曾考虑在ViewData集合中设置一个变量，但对我来说这似乎不是“最佳实践”

---

谢谢

您的执行错误抱歉，控制器与视图无关，即在控制器代码执行期间，除了返回视图外，您无法回复响应。您至少可以做四件事中的一件（我相信还有其他解决方案）：

1-使用Ajax调用JsonResult控制器方法，该方法确定在单击submit按钮后条目是否已经存在-然后根据no查询结果，您可以显示一个弹出窗口，其中“Yes”提交表单并覆盖，或“no”停止提交表单

2-您可以返回视图（无需向db提交查询）并要求用户确认覆盖现有记录-但您必须添加一些附加逻辑，如隐藏的输入字段，以确定用户已看到消息并同意覆盖。这不是一个很好的方法，可能对用户来说也不是很直观

3-在表单中添加“覆盖现有记录”复选框，确认用户希望覆盖数据（如果数据已经存在）

---

4-在逻辑上为用户分别添加和编辑，以便当用户想要更新现有记录时，他们从列表中选择记录并编辑现有数据-这将是我认为最传统的方法。然后，如果用户试图添加与现有项相同的新项，您只需重新显示页面，并显示一个错误，说明记录已经存在。

我继续并实现了答案的第一个选项

当然，坚持传统的添加和编辑场景并使用标准的asp mvc模式会更容易。但这是一次很好的学习经历

这里是代码和标记，它仍然需要一些更多的工作，但你得到的想法。如有任何意见/建议，将不胜感激

        function validate() {

        // Need to do form validation
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/validate"
               , balance
                , function (data) {
                    if (data.valid) {
                        $("#existCheck").val("Valid");
                        checkBalanceExist();
                    }
                    else {
                        $("#existCheck").val("Not Valid");
                        $("#errorMessage").text(data.message);
                    }
                }
                , 'json'
                 );
    };






    function checkBalanceExist() {

        $("#existCheck").val($("#bal_Date").val());


        // Do ajax call to see if balance exist
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/doesBalanceExist"
               , balance
                , balanceCheckPost
                , 'json'
                 );
    };


    balanceCheckPost = function (data) {
        $("#existCheck").val(data);
        if (data) {
            // Does Exist
            $("#existCheck").val("Exist");
            // raise confirmation popup 


            $('#dialog').dialog('open');

        }
        else {
            // Does Not Exist
            $("#existCheck").val("NOT Exist");

            // insert Item
            var balance = {};
            balance.date = $("#bal_Date").val();
            balance.amount = $("#bal_Amount").val();
            $.post("balance/insert",
               balance,
                confirmChange
                 );
        }

    };



    function overWriteBalance() {
        // insert Item
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/edit",
               balance,
                confirmChange
                 );
    };




    confirmChange = function () {
        $("#existCheck").val("Changed");
    };

及

---

可能在这里使用ajax表单-您不希望提交表单，然后显示确认（客户端），然后再次提交。可怜的UX。还有，记录怎么可能已经“存在”？哪些字段是唯一的？您是在为此寻找AJAX解决方案，还是希望提交表单两次？首先提交表单检查唯一性，如果是唯一的，则继续创建记录，如果不是，则重新显示表单并显示警告消息，如果用户第二次提交，它会创建记录。关于弹出窗口，你可以在这里查看谢谢大家，是的，你对这里发生的奇怪的用户交互很满意。但这是一个系统，我将只使用我自己，所以我很高兴有一个表单上的添加/覆盖。嗨，罗布，我想我会给你的第一个选择一试，看看我是否可以使它工作。

        function validate() {

        // Need to do form validation
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/validate"
               , balance
                , function (data) {
                    if (data.valid) {
                        $("#existCheck").val("Valid");
                        checkBalanceExist();
                    }
                    else {
                        $("#existCheck").val("Not Valid");
                        $("#errorMessage").text(data.message);
                    }
                }
                , 'json'
                 );
    };






    function checkBalanceExist() {

        $("#existCheck").val($("#bal_Date").val());


        // Do ajax call to see if balance exist
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/doesBalanceExist"
               , balance
                , balanceCheckPost
                , 'json'
                 );
    };


    balanceCheckPost = function (data) {
        $("#existCheck").val(data);
        if (data) {
            // Does Exist
            $("#existCheck").val("Exist");
            // raise confirmation popup 


            $('#dialog').dialog('open');

        }
        else {
            // Does Not Exist
            $("#existCheck").val("NOT Exist");

            // insert Item
            var balance = {};
            balance.date = $("#bal_Date").val();
            balance.amount = $("#bal_Amount").val();
            $.post("balance/insert",
               balance,
                confirmChange
                 );
        }

    };



    function overWriteBalance() {
        // insert Item
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/edit",
               balance,
                confirmChange
                 );
    };




    confirmChange = function () {
        $("#existCheck").val("Changed");
    };

  public JsonResult validate(Balance bal)
    {
        if (ModelState.IsValid)
        {
            return Json(new { valid = true });
        }
        else
        {
            var errorMessage = "";
            foreach (var key in ModelState.Keys)
            {
                errorMessage += ModelState[key].Errors.FirstOrDefault().ErrorMessage;

            }
            return Json(new { valid = false, message = errorMessage });
        }
    }

    public JsonResult doesBalanceExist(Balance bal)
    {
        var dataContext = new DataDataContext();
        return Json(dataContext.Balances.ToList().Contains(bal, new BalanceEquality()));
    }

    public ActionResult Index()
    {
        var dataContext = new DataDataContext();

        compModel myModel = new compModel();
        myModel.bal = new Balance();
        myModel.allBalances = dataContext.Balances.OrderBy(bal => bal.Date).ToList();

        return View(myModel);
    }

    [HttpPost]
    public ActionResult Index(Balance bal)
    {
        var dataContext = new DataDataContext();

        compModel myModel = new compModel();
        myModel.bal = new Balance();
        myModel.allBalances = dataContext.Balances.OrderBy(ball => ball.Date).ToList();

        return View(myModel);



    }

    public void insert(Balance bal)
    {
        var dataContext = new DataDataContext();
        dataContext.Balances.InsertOnSubmit(bal);
        dataContext.SubmitChanges();
    }


    public void edit(Balance bal)
    {
        var dataContext = new DataDataContext();
        var balToEdit = dataContext.Balances.Single(b => b.Date == bal.Date);
        balToEdit.Amount = bal.Amount;
        dataContext.SubmitChanges();
    }

}