0

我想从我的MVC 操作代码中触发一个Jquery 函数。知道通过直接代码是不可能的，如果有人知道如何通过任何可能的形式（例如发布事件或使用 ajax 调用或其他方式）来完成此任务。

在这里，我有一个可以使用以下代码运行的JQuery 插件。

$('#myModal').Show();

他们原来的调用机制是：

<script type="text/javascript">
$(document).ready(function() {
     $('#myButton').click(function(e) {
          e.preventDefault();
      $('#myModal').Show();
     });
});
</script>

多一点解释：

除了我提到的那一行之外，我不想要大部分代码。也许在这里我们应该在运行提供的 hack 之前让它成为一个更简单的函数。我们想要的不是按钮事件处理程序：在 Controller 中的 Action发送电子邮件后调用此函数$('#myModal').Show();

那个行动 ：

[HttpPost]
public ActionResult Contact(Contact message)
{
    if (ModelState.IsValid)
    {
        string stResult ;
        Emailing.SendEmail(message, out stResult);
        ViewBag.SaveResultMessage = stResult;
    }
    return View(message);
}

从联系人视图调用操作：

    @Html.ValidationSummary(true)
    @using (Html.BeginForm("Contact", "Home", FormMethod.Post, new { name = "send-contact", 
              id = "contactform1"}))
    {           
            if (!String.IsNullOrEmpty(stResult)) 
             {   
                // $('#myModal').Show(); I hoped we could do this way.
             }
        ...
     }

非常感谢您提供的解决方案的任何示例代码和演示。

编辑（基于 bAlexandre 答案）：

您的代码： $("#btnSubmit").click(function () { // 让我们显示加载图像 //$(".myModal").Loading(); // 我们不希望加载或等待操作, // 只想向用户显示最终消息，例如“成功！”。 // 我认为这还不正确，但在确定返回 Json 后想向用户显示消息。

        var frm = $("#send-contact"),  // our form
            url = frm.attr("action"),  // our post action
            dta = frm.serialize();     // our data to be posted

        $.post(url, data, function(data) {
            // data has our returned Json from our view

            //$(".myModal").Show(stResult); Instead I want a place like here to just show the result
            $(".error-message").text(data.message); // just to see it, do what you want
            //$(".loading").hide(); // no more loading as we have what we need
        });

- 我也很想知道当json返回时如何返回和显示stResult。感谢您进一步完成您的回答和您的帮助。

4

4 回答 4

4

因此，假设您想告诉用户电子邮件已发送……或出现问题。

想法应该是，将表单发布到操作并等待结果，然后将其显示给用户。

让我们将您的操作更改为

[HttpPost, ValidateAntiForgeryToken]
public ActionResult Contact(Contact message)
{
    string message = "";

    if (ModelState.IsValid)
        Emailing.SendEmail(message, out message);
    else
       message = "Model not valid";

    return Json(new { message = message }); // will return a Json string
}

然后在您的视图端，使用：

@using (Html.BeginForm("Contact", "Home", FormMethod.Post, 
          new { name = "send-contact", id = "send-contact"}))
{           
    @Html.AntiForgeryToken() 

    ...

    <input type="button" class="btn-submit" value="Send email" />
}

以及脚本

@section script
{
    <script>
        $(".btn-submit").click(function() {
            // let's show a loading image
            $(".loading").show();

            var frm = $("#send-contact"),  // our form
                url = frm.attr("action"),  // our post action
                dta = frm.serialize();     // our data to be posted

            $.post(url, data, function(data) {
                // data has our returned Json from our view
                $(".error-message").text(data.message); // just to see it, do what you want
                $(".loading").hide(); // no more loading as we have what we need
            });


            return false;
        });
    </script>
}

关于您的代码的一些提示：

out1 -如果您可以简单地返回一个对象，请避免使用，Emailing.SendEmail(message, out stResult);只需编写：

stResult = Emailing.SendEmail(message);

使其更易于阅读并使其更易于理解。

2 - 在标签和 foreach 视图_Layout之前使用脚本部分，</body>您可以通过调用将脚本放在那里@section script { ... }

3 - 发布到您自己的网站时，始终使用您自己的网站ValidateAntiForgeryToken，这更容易，也更难，例如，有人侵入您的表单并发送垃圾邮件......

于 2013-07-28T15:26:47.703 回答
0

您可以在视图中使用“viewBag”结果来调用 Jquery 函数

例如，

<script type="text/javascript">
@if(ViewBag.SaveResultMessage)
{
    $('#myModal').Show();
}

于 2013-07-28T15:01:38.497 回答
0

您可以按照以下步骤操作，

例如：1）创建将返回 meassge 作为字符串的操作（您也可以使用其他数据类型），

    公共字符串 Contact(联系方式)
    {
        //演示代码
        字符串结果 = "成功"
        返回结果
    }

2）进行ajax调用和ajax调用的成功回调函数验证您的结果并打开模态表单， 

    $.ajax({
            类型：“发布”，
            url: "联系方式",
            数据：JSON.stringify（消息），
            contentType: "应用程序/json; charset=utf-8",
            数据类型：“json”，
            成功：函数（结果）{
                if(result.d == "成功")
                    $('#myModal').Show();
            },
            错误：函数（）{                   



        }
    });

于 2013-07-30T05:28:39.993 回答
0

尝试ajax调用，

            $.ajax({
            type: "POST",
            url: "Contact",
            data: JSON.stringify(message),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function () {
                $('#myModal').Show();
            },
            error: function () {                   

            }
        });
于 2013-07-28T15:14:13.930 回答