使用 MVC、JavaScript 显示弹出窗口

Question

我在 MVC 4 中有一个简单的创建表单，并且想要两个提交函数：(1) 创建和 (2) 创建和打印。 Create 是一个正常的 Create 动作，可以完美运行。 Create & Print 应该保存对象，然后启动一个弹出浏览器窗口，其中包含来自新保存对象的数据。原始窗口需要刷新为空白的创建表单，为另一条记录做好准备。

解决这个问题的最佳方法是什么？

下面是一个实际可行的示例，但是我将 ID 硬编码在其中。理想情况下，此 ID 将从刚刚保存的对象动态继承并链接到那里。 JavaScript 是这里最好的主意还是应该（可以）从控制器启动弹出窗口？

<input type="submit" value="Create" />
<input type="submit" 
     value="Create & Print" 
     onclick="window.open('Print/f1ad6330-2978-4ea9-9116-65f861412260'
       , 'PRINT'
       , 'height=200,width=200');" />

Answer 1

最好的选择是创建另一个返回字符串 (last-insert-id) 的操作，通过 ajax 向其发布数据并在 javascript 中获取 last-insert-id，然后您可以使用它打开新窗口。 现在假设这是新的控制器动作：

    [HttpPost]
        public string CreateAndPrint(Object obj)
        {
           // Save data here / insert record here

           if (Request.IsAjaxRequest())
           {
             // Now get last insert id
             string lastInsertId = db.GetLastInsertId; // get last insert id from database
             return lastInsertId;
            }
        }

有一个javascript函数来发布数据：

    <script type="text/javascript">
      function creteAndPrint() {
        $.ajax(
        {
            url : "CreateAndPrint",
            type: "POST",
            data : $("#from1").serialize(),
            success:function(data) 
            {
                var lastInsId = data; // you will get last insert id here.
                var secWin = window.open('Print/'+lastInsId
                , 'PRINT'
                , 'height=200,width=200');
                secWin.focus();
            }
        });
      }
    </script>

并且仅在创建和打印按钮上调用此函数：

    <input type="submit" value="Create & Print" onclick="creteAndPrint();" />

希望它对你有用。谢谢。

---

在您发表评论后，我正在编辑我的答案:)

是的！您可以调用相同的Create 操作来实现我上面解释的相同操作。但为此，您必须在 Create 操作中进行一些更改：

 public string Create(Object obj)
        {
           // Save data here / insert record here

           if (Request.IsAjaxRequest())
           {
             // Now get last insert id
             string lastInsertId = db.GetLastInsertId; // get last insert id from database
             return PartialView("_Create", lastInsertId);
            }
            return View();
        }

请注意，当您通过 AJAX 调用此操作时，它将返回一个局部视图，该视图仅返回 LAST_INSERT_ID 作为字符串。您只需创建一个简单的局部视图 _Create 即可打印 last-insert-id。 局部视图将只有两行：

@model string
@Model

这将打印我们从控制器操作传递的最后一个inst-id。

Answer 2

我最终绕过了表单对 Create 方法的默认提交调用，只创建了两个新方法。这并不理想，但它确实有效。

解决方案

表格：

@using (Html.BeginForm("Dummy", "Count", FormMethod.Post, new { id = "form1" }))
{
    // My Form
    // Note the Dummy controller which will just fall through and do nothing
}

表单提交：

<input type="submit" value="Create & Print" onclick="createAndPrint();" />
<input type="submit" value="Create"         onclick="createWithoutPrinting();" />

JavaScript：

 <script type="text/javascript">
    function createAndPrint() {
        $.ajax(
        {
            url: "CreateAndPrint",
            type: "POST",
            data: $("#form1").serialize(),
            success: function (data) {
                var lastInsId = data; // you will get last insert id here.
                var secWin = window.open('Print/' + lastInsId
                , 'PRINT'
                , 'height=450,width=230');
                secWin.focus();
            }
        });
    }
</script>
<script type="text/javascript">
    function createWithoutPrinting() {
        $.ajax(
        {
            url: "Create",
            type: "POST",
            data: $("#form1").serialize()
        });
    }
</script>

控制器：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Dummy(Count count)
{
    return RedirectToAction("Create");
}

[HttpPost]
public string CreateAndPrint(Count count)
{
    SaveCount(count);

    if (Request.IsAjaxRequest())
    {
        // Now get last insert id
        string lastInsertId = count.Id.ToString();
        return lastInsertId;
    }

    return "";
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Count count)
{
    SaveCount(count);

    if (Request.IsAjaxRequest())
    {
        // Now get last insert id
        string lastInsertId = count.Id.ToString();
        return PartialView("_Create", lastInsertId);
    }

    return RedirectToAction("Create");
}