使用 JSON 和 jQuery 在 MVC3 中进行异常处理和状态消息

Question

我正在用 MVC3 和 C# 编写代码。我想在发生异常和自定义异常时向用户发送用户友好的消息。我正在考虑使用 JSON 和 jQuery 弹出框。 你能告诉我该怎么做吗？有关于这个主题的教程或文章吗？

编辑：

我想创建扩展 IExceptionFilter 的自定义 ActonFilter。自定义过滤器捕获异常（如果抛出异常）并返回自定义类 ShowMessage(ex)。自定义类返回包含所需消息的 JSON 结果。在 jQuery 中，有一个解析器，它显示带有消息的弹出框（如果有例外）。

Answer 1

如果我似乎正确理解你的问题，有很多方法可以做到这一点。

我的控制器看起来像这样：

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult ContactUs(DatabaseModelExtensions.ContactRequest model) // Pass          model of which I am submitting a form against to retrieve data inside this HTTPPost Controller
    {
        // Create database object to map extension class to it.
        ContactRequest NewEntry = new ContactRequest();

        if (ModelState.IsValid)
        {
            // Map database object to the model passed and then insert.
            NewEntry.Name = model.Name;
            NewEntry.Email = model.Email;
            NewEntry.Message = model.Message;
            NewEntry.Timestamp = System.DateTime.Now;

            // Insert new entry into database for historical tracking
            NewEntry.Insert();

            // Clear modelstate (clearing form fields)
            // ModelState.Clear(); -- Does not work with an Ajax call - requires postback.

            // Email user about their contact request and also send admins a summary of the contact request.
            // Create new UserMailer Object so that we can invoke this class and work with it's functions/properties.
            var Mailer = new UserMailer();

            // Instantiated the 'msg' variable that will allow for us to invoke Mailer.ContactSubmission(), this function passes a series of parameters so that we can reference them inside
            // our UserMailer.cs class which then gets passed to a mail template called ContactSubmission.cshtml under the Views -> UserMailer folder
            var msg = Mailer.ContactSubmission(firstName: model.Name, email: model.Email, telephone: model.Telephone);

            // Same as above except we will be sending out the management notification.
            var msg1 = Mailer.AdminContactSubmission(firstName: model.Name, email: model.Email, datetime: System.DateTime.Now, message: model.Message, telephone: model.Telephone);

            // Invoke the .Send() extended function that will actually execute everything to send an SMTP mail Request.
            msg1.Send();
            msg.Send();


            // Return our content back to the page asynchronously also create a quick snippet of js to slide the message up after a few seconds.               
            return Content(new MvcHtmlString(@"
                                    <div id='sendmessage'>
                                        Your message has been sent, Thank you!
                                    </div>
                                    <script type='text/javascript'>
                                       setTimeout(function () { jQuery('#results').slideUp('fast') }, 3000);
                                    </script>").ToString());
        }
            // Return our Error back to the page asynchronously.
        return Content(new MvcHtmlString(@"
                                    <div id='errormessage'>
                                        An error has occured, please try again in a few moments!
                                    </div>
                                    <script type='text/javascript'>
                                       setTimeout(function () { jQuery('#results').slideUp('fast') }, 3000);
                                    </script>").ToString());
    }

然后我的视图看起来像这样：

<div id="results">Content would be returned in place of this div.</div>
@using (Ajax.BeginForm("ContactUs", "Home",
        new AjaxOptions
        {
            LoadingElementId = "loading",
            OnBegin = "DisableForm('contactform')",
            UpdateTargetId = "results",
            OnSuccess = "resetForm('contactform'); removeLoading()"
        }, new { @id = "contactform" }))
    {       
        @Html.ValidationSummary(true)           
        <div id="results">

        </div>
        <ul class="cform">
            <li><label for="name">Name:</label>             
            @Html.TextBoxFor(Model => Model.Name, new { @name = "name", @id = "name", @class = "fancyinput reginput" })
            @Html.ValidationMessageFor(Model => Model.Name)
            </li>
            <li><label for="email">E-mail:</label>
            @Html.TextBoxFor(Model => Model.Email, new { @name = "email", @id = "email", @class = "fancyinput reginput" })
            @Html.ValidationMessageFor(Model => Model.Email)
            </li>
             <li><label for="telephone">Telephone:</label>
            @Html.TextBoxFor(Model => Model.Telephone, new { @name = "telephone", @id = "telephone", @class = "fancyinput reginput" })
            @Html.ValidationMessageFor(Model => Model.Telephone)
            </li>
            <li><label for="message">Message:</label>
            @Html.TextAreaFor(Model => Model.Message, new { @name = "message", @id = "message", @class = "fancyinputarea", @rows = "10", @cols = "62" })
            @Html.ValidationMessageFor(Model => Model.Message)
            </li>
            <li><input type="submit" value="Submit" class="btn" name="submit"/><img id="loading" style="display: none;" src="../../Content/img/loading27.gif" alt="Loading..." /></li>
        </ul>
    }

这是一个简单的联系页面示例，具有 ajax 的完整功能，并通过带有动画 gif 的 css 背景的加载 div 警告用户何时发生某些情况并让他们知道他们的结果成功/失败。

您还可以通过使用 ActionResult、调用它并返回 Content

 public ActionResult SubmitForm(int id)
 {
      return Content(new MvcHtmlString("<div>test test</div>").ToString());
 }

 and the jQuery AJAX side of things would be;

 $.ajax({
   type: 'POST',
   url: @Url.Action("SubmitForm","VotingController"),
   data: { id : @Model.UserId },
   success: success, // Javascript function to call back on success.
   dataType: dataType // data type expected back from the server
 });

This 后半部分来实现类似的效果以及更多效果 - 只需将其视为伪代码，因为我只是即时编写它，但应该进行一些小的调整。

希望这对您有帮助，并且我不会因为做错事而被嘲笑，但是，如果我这样做并且有人可以向我展示更好的方法，我也很乐意改善自己:)