Как отправить форму обратной связи?

Question

Мне нужно сделать какую-то форму, используя элементы управления Razor и Devexpress. Когда пользователь открывает всплывающее меню Devexpress, появляется форма с полями, которые ему нужно ввести. Вот мое мнение:

@model Models.Request 
@Html.DevExpress().PopupControl(
settings => 
{ 
    settings.Name = "newRequest"; 
    settings.CallbackRouteValues = new { Controller = "Request", Action = "RequestForm" }; 
    settings.EnableClientSideAPI = true; 
    settings.Width = 450; 
    settings.ShowHeader = true; 
    settings.ShowShadow = true; 
    settings.PopupAnimationType = AnimationType.Fade; 
    settings.AllowDragging = true; 
    settings.Modal = true; 
    settings.SetContent(() => 
    { 
     using (Html.BeginForm()) 
     { 
      ViewContext.Writer.Write("<div id = 'products'>"); 
      foreach(var product in Model.Products) 
      { 
       Html.RenderPartial("ProductPartial", product); 
      } 
      ViewContext.Writer.Write("</div>"); 

      //Total days field 
      @Html.DevExpress().SpinEdit(
          cSettings => 
          { 
           cSettings.Name = "numberOfProducts"; 
           cSettings.Properties.EnableClientSideAPI = true; 
           cSettings.Width = 125; 
           cSettings.Properties.MinValue = 0; 
           cSettings.Properties.MaxValue = 100; 
           cSettings.ControlStyle.BackColor = System.Drawing.Color.FromArgb(82, 82, 82); 
           cSettings.ControlStyle.ForeColor = System.Drawing.Color.White; 
          }).Bind(Model.NumberOfProducts).GetHtml(); 

      //POST BACK 
      @Html.DevExpress().Button(saveSett => 
      { 
       saveSett.Name = "Save"; 
       saveSett.Text = "Save"; 
       saveSett.Width = 40; 
       saveSett.Height = 25; 
       saveSett.ControlStyle.CssClass = "button"; 
       saveSett.Styles.EnableDefaultAppearance = false; 
       saveSett.EnableClientSideAPI = true; 
       saveSett.UseSubmitBehavior = true; 
       //saveSett.ClientSideEvents.Click = "function(s, e) { if(CheckValidation(s, e)) {} }"; 
      }).GetHtml(); 
     } 
    });  
}).GetHtml(); 

Я ожидал, что, когда мой взгляд визуализируются, что он будет вызывать HTTP GET метода, но это не так, то всегда вызывается метод поста (если есть прибудет сообщение с одинаковые имена), определяемые следующим образом:

settings.CallbackRouteValues = new { Controller = "Request", Action = "RequestForm" }; 

Почему это так? И если я изменю имя метода отправки (которое будет вызываться при отправке), это дает мне ошибку, говоря, что нет метода для вызова.

Более того, у меня есть кнопка, которую я хотел использовать для отправки формы: settings.CallbackRouteValues ​​= new {Controller = "Request", Action = "RequestForm"}; Но он даже не входит в какой-либо метод действий в контроллере. Почему это так?

Вот мои методы действия:

public ActionResult RequestForm() 
{ 
    //... 
} 

[HttpPost] 
public ActionResult RequestForm([ModelBinder(typeof(DevExpressEditorsBinder))] Request request) 
{ 
    //... 
} 

Как отправить обратно свою модель? Каков наилучший способ сделать это? Очевидно, что он не работает с этими элементами управления Devexpress в обычном режиме. Могу ли я как-то опубликовать эту модель с помощью jquery? Каков наилучший способ? Пожалуйста, порекомендуйте.

Answer 1

Я всегда использую ниже решение, когда хочу показать всплывающее окно с подтверждением. Прежде всего я создаю управление всплывающую обычно только со значением обратного маршрута (при необходимости использовать Begin и End обратного вызова и другие свойства):

@Html.DevExpress().PopupControl(settings => 
{ 
settings.Name = "newRequest"; 
settings.CallbackRouteValues = new { Controller = "Request", Action = "GetRequestForm" }; 
//[Optionally]: If you want pass data to action controller or set popup properties 
settings.ClientSideEvents.BeginCallback = "myLogic.onBeginActionCallback";  
settings.ClientSideEvents.EndCallback = "myLogic.onEndActionCallback"; 
}).GetHtml() 

Далее я создаю действия контроллера:

public ActionResult GetRequestForm()  { 
     // … some logic here ... 
     return PartialView("_PartialView", viewModel); 
    } 

    [HttpPost] 
    public ActionResult RequestForm([ModelBinder(typeof(MyBinder))] Request request) 
    { 
     // … some logic here ... 
     return Json(new { success = true }); 
    } 

Следующая я создаю вид (название: "_PartialView"):

@using (Ajax.BeginForm("RequestForm", "Request", 
new AjaxOptions 
{ HttpMethod = "POST" }, new { id = "saveForm" })) 
{ 
    @Html.DevExpress().TextBox(settings => 
    { 
     settings.Name = "someProperty"; 
    }).GetHtml() 

// … other properties… 

@Html.DevExpress().Button(settings => 
{ 
    settings.Name = "SaveButton"; 
    settings.Text = "Save"; 
    settings.ClientSideEvents.Click = "function(s,e) { myLogic.saveForm(); }"; 
    settings.UseSubmitBehavior = false; 
}).GetHtml() 
} 

И, наконец, создать JS скрипт, который используют проверки JQuery (например, myLogic.js):

var myLogic = function() { 

function saveForm(){ 
var saveForm = $("#saveForm"); 
    saveForm.removeData('validator'); 
    saveForm.validate(validationSettings); 

// jQuery validation 
$("#someProperty_I").rules("add", { 
    required: true, 
    // Connect with server example 
    remote: { 
     url: '/Request/CheckValue', 
     data: { 
      //.. some logic here .. 
     } 
    }, 
    messages: { 
     required: "Required!", 
     remote: "Validation message" 
    } 
}); 

// and add other jQuery validation 

if (saveForm.valid()) { 
     saveForm.submit(); 
    } 
} 

var validationSettings = { 
    errorPlacement: function (error, element) { 
     error.appendTo(element.parent("td").parent("tr").parent("tbody").parent("table").parent("td")); 
    } 
} 

return { 
    saveForm: saveForm 
}}(); 

Конечно, вы должны включить JQuery скрипты:

1. jquery.validate.min.js 
2. jquery.validate.unobtrusive.min.js