2013-05-07 2 views
1

Мне нужна небольшая помощь в этом, так как я очень новичок в AJAX в целом. На данной странице, которая у меня есть (вид), я показываю кнопку, которая вызывает форму. В конечном итоге я хочу передать данные в этой форме контроллеру внутри моего приложения. Я знаю, что есть много уроков о том, как это сделать ... однако, похоже, у меня проблема с пониманием того, как это делается; поэтому я хочу пройти пошаговую процедуру. Я просто хочу отобразить другое представление после того, как пользователь нажимает кнопку «Сохранить» в диалоговом окне. Надеюсь, это ясно. Вот мой HTML + JQueryПеренаправление в Action-Controller MVC 4 внутри 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> 

Я попытался с помощью $ .ajax ({}) и установка этого: Url: "/Areas/Website/Controller/Action но скриптовый перестает работать в этой точке. Любая помощь приветствуется! Спасибо!

EDIT

ли мне даже нужно использовать AJAX вообще? Я просто хочу передать информацию в этой форме (внутри диалога) контроллеру.

+0

Просьба предоставить более подробную информацию о представлении, таком как форма Html (включая кнопку ввода в конце, ту, которая говорит type = "submit") –

+0

Нет ничего особенного в представлении. У меня есть помощники для отображения начальной формы. Это не имеет особого отношения к тому, что я хочу выполнить: диалог отображения, заполнение формы, ввод данных, введенных в контроллер, отображение этой формы с помощью ViewResult. Имеет ли это смысл? – Jose

+0

Наоборот, вам действительно не нужны ajax или jquery и т. Д. Поэтому я хотел, чтобы вы показали мне свою форму, я могу дать вам шаги по отправке данных из вашей формы в контроллер. Это не сложно. –

ответ

2

Хорошо, попробуйте заменить ваш <form id="form" method="post"> form fields </form> с

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

THEN вам нужно идти в класс контроллера, и добавьте [HttpPost] выше вашего метода контроллера, например:

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

ПРИМЕЧАНИЕ, что [HttpPost] требует, чтобы вы добавили новую «использующую» вставку вверху вашего класса контроллера.

Метод NameOfControllerMethod - это метод, который содержит HttpPost над ним. Имя класса контроллера похоже на «MyClass», исходя из контроллера MyClassController, в качестве примера.

+0

Спасибо, брат! Попробуй это всего за одну секунду. Я буду отмечать это как ответ, как только смогу заставить его работать. Благодаря! – Jose

+1

Единственное, о чем я беспокоюсь, это то, что ваши входные данные могут быть отправлены через HttpPost, но единственный способ узнать это - попробовать сначала: P –

2

Попробуйте это:

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

внутри функции мыши.

+0

Это полезно, поскольку я вижу, как javascript и jquery могут взаимодействовать ... так что это первый шаг. Теперь, как я могу передать «данные» (мои значения формы) на следующую страницу? – Jose

+0

Этот jsfiddle должен помочь. Я пытаюсь сделать то, что там происходит, отобразить диалог, получить эти данные, но вместо добавления его в таблицу в том же представлении я хочу вызвать действие контроллера (сохранить форму в базе данных и т. Д. ..) [JsFiddle] (http://jsfiddle.net/536fm/6/) – Jose

+0

Итак, у вас есть представление с формой, затем вы хотите получить данные из этой формы, передать ее контроллеру и открыть другая веб-страница (вид) по существу? Пожалуйста, покажите мне ваш Html.BeginForm() и т. Д. И т. Д. –

Смежные вопросы