How to display error message on jQuery modal in MVC

Question

Hello,

I am trying to lookup an employee by their ID using a jQuery modal. My Modal has an input text box for the employee ID and a Search button. Once the search button is clicked I have the value looked up in a db and if no result exists I am looking for an error message to display on that same modal.

My controller looks like this:

  [AcceptVerbs(HttpVerbs.Post)]
    [ActionName("CreateEmpLookup")]
    public ActionResult CreateEmpLookupPost(string empIDSearch)
    {
        List<spGetEmployeeDataByEIDResult> res = new List<spGetEmployeeDataByEIDResult>(_service.GetUserFromDB(empIDSearch));
        if (res.Count > 0)
        {
            ViewData["Status"] = true;
            return RedirectToAction("Create", new { empID = empIDSearch });
        }
        else
        {
            ViewData["Status"] = "false";
            return Content("False");
        }
    }

I'm just not sure how to relay the information back to the pop up modal that there is no result. I'm thinking I have to replace this line return Content("False"); with the message that will go back to the jQuery pop up modal.

In my pop up modal I have the following line that will display any error messages:

<input type="hidden" id="Status" value="<%= (ViewData["Status"] == null) ? "true" : ViewData["Status"].ToString() %>" />

Here is a snippet of my jQuery code:

$('#login_form').modal();

And the div that jQuery targets:

<div id="login_form" style='display: none'>
    <div id="status" align="left">
        <center>
            <h1>
                <img src="../../Content/modal_images/Search48.png" alt="Key" id="modal_img" />
                <label id="modal_title">
                    Employee Search</label>
            </h1>
            <br class="modal_br" />
            <div id="login_response">
                <input type="hidden" id="Status" value="<%= (ViewData["Status"] == null) ? "true" : ViewData["Status"].ToString() %>" />
            </div>
        </center>
        <% using (Html.BeginForm("CreateEmpLookup", "", FormMethod.Post))
       { %>
        <form id="login" action="javascript:alert('success!');">
        <%--<input type="hidden" name="action" value="user_login" />
        <input type="hidden" name="module" value="login" />--%>
        <table class="modal_table">
            <tr>
                <td>
                    <label id="modal_label">
                        Employee ID:</label>
                </td>
                <td>
                    <%= Html.TextBox("empIDSearch", "", new { @maxlength = "6" })%>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input value="Search" name="Search" id="submit" type="submit" />
                    <div id="ajax_loading">
                        <img src="../../Content/modal_images/spinner.gif" alt="Processing" />&nbsp;Processing...
                    </div>
                </td>
            </tr>
        </table>
        </form>
        <% } %>
    </div>
</div>

Any advice on how to make this easier or fix this problem would really help.

Thank you.

Answer 1

@GB, I can think of a couple of ways to do this. However, given you are using a Modal dialog and you want to display it in there that kinda limits your options.

If you're doing a post using a submit button, as it looks like you are, then on return back to the page you need to display the popup again and then fill in the details.

One nifty way of doing that might be to use PartialViews (PV). If you get back a result then you could render on PV and if not then you render another one. Not great but it would work.

The best way, IMHO, is to use jQuery to do a partial postback. Then you could do your search and on return from the partial post back you could render either a list or the error.

So;

1. Allow user to enter the search criteria
2. Do a jQuery/AJAX call to do your search
3. If you fail, then return a PV that contains your error and render that to a parent DIV.
4. If you succeed, and it's not clear what you're doing at this point, show another PV with the user details / List.

An AJAX postback can return a PV. The return value in this case is html that can simply be inserted into a Div or something.

This would be ideal as you don't get the annoying screen flicker effect.

If you want code samples, post a comment and I'll provide some.