Redirect to Action-Controller MVC 4 inside Jquery

Question

I need a little help with this since I am very new to AJAX in general. In a given page that I have (a view) I display a button which brings up a form. What I ultimately want is to pass the data input in that form to a controller inside my application. I know there are plenty of tutorials on how to do it out there...however, I seem to have a problem understanding how this is done; therefore, I want to traverse this step-by-step. I just simply want to display a different view after the user clicks on the "Save" button on the dialog. I hope that is clear. Here is my HTML + jQuery

@model AccommodationEditViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<table>
    <tr>
        <td>
        @Html.ActionLink("Back to list", "List", "Accommodation")
        </td>
    </tr>
    <tr>
        <td>    
            @if ( Model.Accommodation.LocaleID != Guid.Empty)
            {
                @Html.DisplayAccommodation(IAccommodationDisplay);
            }
        </td>
    </tr> 
</table>

<div class="genericform">
<form id="form" method="post">

    @Html.AccommodationEditDisplay()
<table>
    <tr>
        <td>
            @Html.ActionLink("Add New Address", "", "", new { id = "addaddresses" }, null)
        </td>
    </tr>
    @if (Model != null && Model.Accommodation.Addresses.Count() == 0)
    {
        <tr>
            <td>
                This Locale Contains No Addresses
            </td>
        </tr>
    }
    else
    {
        foreach (Address address in Model.Accommodation.Addresses)
        { 
            <tr>
                <td>
                    @address.Address1
                </td>
            </tr>
        }
    }
</table>
<br /> <br />
<input type="submit" name="command" value="Save"  />
<input type="submit" name="command" value="Delete" />
</form>
</div>

<button id="opener">Add Address</button>

<div id="dialog" title="Add Address" style="display:none;">
<label for="Address1">Address: </label><input id="Address1" />
<label for="Address2">Address 2: </label><input id="Address2" /> 
<label for="City">City: </label><input id="City" />
<label for="State">State: </label><input id="State" />
<label for="PostalCode">Postal Code: </label><input id="PostalCode" />
</div>

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.20.js"></script>
<link type="text/css" href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet"  />

<script type="text/javascript">    
$(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "explode",
                duration: 250
            },
            hide: {
                effect: "explode",
                duration: 250
            },
            buttons: {
                "Save": {
                    text: "Save",
                    class: "",
                    click: function () {
                         //**redirect here**
                        $(this).dialog("close");

                    }},
                "Cancel": {
                    text: "Cancel",
                    class: "",
                    click: function () {
                    $(this).dialog("close");
                }
            }},
            modal: true
        });

        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });
</script>

I have tried using $.ajax({}) and setting this: Url: "/Areas/Website/Controller/Action but scripting stops working at that point. Any and all help is appreciated! Thank you!

EDIT

Do I even need to use AJAX at all? I just want to pass the information in that form (inside the dialog) to a controller.

Answer 1

Ok, try replacing your <form id="form" method="post"> form fields </form> with

@using (Html.BeginForm("NameOfControllerMethod", "NameOfControllerClass")) 
{
<!-- fields for gathering data, your input fields essentially -->
}

THEN you need to go to your controller class, and add [HttpPost] above your controller method, like this:

[HttpPost]
public ActionResult MethodName(AccomodationEditViewModel viewModel) {
//do stuff in here with the viewModel, for example viewModel.Location, or viewModel.Name
}

NOTE that the [HttpPost] requires that you add a new "using" insert at the top of your controller class.

The NameOfControllerMethod is the method that has the HttpPost above it. The name of the controller class is like "MyClass", coming from the controller named MyClassController, as an example.

Answer 2

Try this:

window.location = "/Areas/Website/Controller/Action";

inside your click function.