从JS对话框中单击发布到控制器的操作方法

Question

我在我的视图中有一个JS对话框。当视图返回时，对话框被最大化/打开。该视图还有一个链接，当用户点击链接时，该对话框打开。

我在名为Submit的对话框中有一个按钮。我试图做的是，当模式框打开时，页面元素的其余部分应该模糊或不分明。当他们点击对话框中的提交按钮时，它应该使用模型属性发布到控制器操作方法。我不是很擅长JS语法，但是如何在提交点击的情况下发回给名为“Create”的控制器操作，提交值为“Confirmation”？

@model RunLog.Domain.Entities.RunLogEntry 
@{ 
    ViewBag.Title = "Create"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 

} 

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" })) 
    { 
     @Html.ValidationSummary(true) 
     <div class="exception">@(ViewBag.ErrorMessage)</div> 

     //xyz elements here 

      <div class="bodyContent"> 
     <span class="leftContent"> 
      @Html.Label("Run Dates") 
     </span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink"> 
      Click here to Select Run Dates</span> 
      <br /> 
      <span id="RunDatesDisplayy"></span></span> 
    </div> 

    <div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal; 
     overflow: scroll; width: 800px; height: 450px; display: none;"> 
     <table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;"> 
      <thead> 
       <tr> 
        <th> 
         Run Dates: 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
        @Html.EditorFor(x => x.RunDatesDisplay) 
      </tbody> 
     </table> 
    </div> 
} 

JS文件对话框（runDates.js）：

var RunDialog; 
$(document).ready(function() { 

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400, 
     buttons: { "Submit": function() { 
      $(this).dialog("close"); 
     }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('#RunDatesChildDialogLink').click(function() { 
     RunDialog.dialog('open'); 
     $("#runDatestreeview").parent().appendTo("form"); 
    }); 

    $("#runDatestreeview").parent().appendTo("form"); 
}); 

控制器动作：

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM, 
            string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates) 
     { 




**EDIT:** 


var RunDialog; 

$(document).ready(function() { 

    RunDialog = $("#runDatestreeview").dialog({ resizable: false, autoopen: false, height: 140, modal: true, width: 630, height: 400, 
     buttons: { "Continue": function() { 
      var str = $("#form").serialize(); 

      $.ajax({ 
       url: "/RunLogEntry/Create", 
       data: str, 
       cache: false, 
       type: 'POST', 
       dataType: 'json', 
       contentType: "application/json;charset=utf-8", 
       success: function (data, status) { 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { alert('error') } 
      }); 

     }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $('#RunDatesChildDialogLink').click(function() { 
     RunDialog.dialog('open'); 
     $("#runDatestreeview").parent().appendTo("form"); 
    }); 

    $("#runDatestreeview").parent().appendTo("form"); 
}); 

Answer 1

示例来说明如何您可以发布数据到控制器方法

剃刀代码：

<div id="form"> 
     <table width="600"> 
      <tr> 
       <td>Select Date:</td> 
       <td> 
        <input class="txtDate" type="date" size="20"></td> 
      </tr> 
      <tr> 
       <td>Select Expense Type:</td> 
       <td> 
        <select class="ExpenseType"> 
         <optgroup label="Room"> 
          <option>Room Fare</option> 
         </optgroup> 

         <optgroup label="Mess"> 
          <option>Monthly Mess</option> 
         </optgroup> 

         <optgroup label="Others"> 
          <option>Bus Fare</option> 
          <option>Tapari</option> 
          <option>Mobile Recharge</option> 
          <option>Auto</option> 
         </optgroup> 
        </select></td> 
      </tr> 
      <tr> 
       <td>Enter Cost:</td> 
       <td> 
        <input class="cost" type="text" size="45" /></td> 
      </tr> 
      <tr> 
       <td>Extra Details:</td> 
       <td> 
        <input class="extra" type="text" size="45" /></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td> 
        <button href="javascript:void(0);" onClick="saveExpense();" >Submit</button></td> 
      </tr> 
     </table> 
    </div> 

jQuery代码：

<script> 
function saveExpense() 
    { 
     var expenseobject = { 
      date:$('.txtDate').val() , 
      type:$('.ExpenseType').val() , 
      cost: $('.cost').val(), 
      extra:$('.extra').val() 

     }; 

     $.ajax({ 
      url: './saveexpense', 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ obj: expenseobject }), 
      success: function (result) { 
       handleData(result); 

      } 
     }); 

    } 
</script> 

控制器：

public ActionResult SaveExpense(Expense obj) 
     { 
      obj.ExpenseId = Guid.NewGuid(); 
      if (ModelState.IsValid) 
      { 
       context.expenses.Add(obj); 
       context.SaveChanges(); 
       int total=context.expenses.Sum(x => x.cost); 
       return Json(new {spent=total,status="Saved" }); 

      } 
      else 
       return Json(new { status="Error"}); 
     } 

希望这将让你通过现在...

Answer 2

我只是做了一个简单的发布并使用form.serialize而不是手动设置每个模型属性。简短

$.post("/RunLogEntry/Create", $("#form").serialize(), function (json) { 
      // handle response 
     }, "json");