用於AJAX的POSt方法動態創建輸入字段

我已經成功地實現了一種方式，讓用戶通過單擊按鈕（使用AJAX和Steven Sanderson的博客）動態添加更多輸入行。但是我不知道如何將數據保存到用戶在這些動態創建的字段中輸入的數據庫中。

我使用他的幫手類，坦率地說我很努力地理解。

我的問題是我需要在POST創建方法。在他的博客中的代碼鏈接在這裏： steven sanderson's blog

只是一個正確的方向是我需要的指針。這是我當前的代碼：

新行局部視圖：

@model ef_tut.ViewModels.ClaimsViewModel 

@using ef_tut.WebUI.Helpers 
    @using (Html.BeginCollectionItem("claims")) 
    { 
     <table class="editorRow"> 
    <tr > 
         <td> 
      SubmissionUserID: @Html. EditorFor (o.claim.SubmissionUserID) 
          </td> 
             <td> 
      ClaimID: @Html.EditorFor(o => o.claim.ClaimID) 
      </td> 
             <td> 
      @Html.EditorFor(o => o.claim.ApprovedYN) 
      </td> 
                <td> 
      ClaimID(claimlinetable)@Html.EditorFor(o => o.claimline.ClaimID) 
      </td> 

     <td> 
      ClaimantUserID: @Html.EditorFor(o => o.claimline.ClaimantUserID) 
      </td> 
           <td> 
      Hours: @Html.EditorFor(o => o.claimline.Hours) 
      </td> 
         <td> 
      MileageCost: @Html.EditorFor(o => o.claimline.MileageCost) 
      </td> 
               <td> 
      TravelCost: @Html.EditorFor(o => o.claimline.TravelCost) 
      </td> 
           <td> 
      Hours cost: @Html.EditorFor(o => o.claimline.HoursCost) 
      </td> 
           <td> 
      Total cost: @Html.EditorFor(o => o.claimline.TotalCost) 
      </td> 
             <td> 
      ProxyYN: @Html.EditorFor(o => o.claimline.ProxyClaim) 
      </td> 

             <td> 
      CatID: @Html.EditorFor(o => o.claimline.CatID) 
      </td> 
             <td> 
      SubCatID: @Html.EditorFor(o => o.claimline.SubCatID) 
      </td> 
                  <td> 
      <a href="#" class="deleteRow">delete</a> 
      </td> 
       </tr></table> 

    }

Blankeditorrowmethod

public PartialViewResult BlankEditorRow() 
{ 
       return PartialView("NewRow", new ClaimsViewModel()); 
}

我目前的POST方法創建新的數據庫記錄，但所有字段都爲空

[HttpPost] 
    public ActionResult Create(ClaimsViewModel viewModel) 
    { 

     if (ModelState.IsValid) 
     { 
      db.claims.Add(viewModel.claim); 
      db.claimlines.Add(viewModel.claimline); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     return View(viewModel); 
    }

創建視圖

@model ef_tut.ViewModels.ClaimsViewModel 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>claim</legend> 

     <div id="editorRows"></div> 


     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Add another...", "BlankEditorRow", null, new { id = "addItem" }) 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
}

jQuery的

$("#addItem").click(function() { 
    $.ajax({ 
     url: this.href, 
     cache: false, 
     success: function (html) { $("#editorRows").append(html); } 
    }); 
    return false; 
}); 

$("a.deleteRow").live("click", function() { 
    $(this).parents("table.editorRow:first").remove(); 
    return false; 
});

史蒂芬的幫助

using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.Mvc; 


namespace ef_tut.WebUI.Helpers 
{ 
    public static class HtmlPrefixScopeExtensions 
    { 
     private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_"; 
     public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName) 
     { 
      var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName); 
      string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString(); 

      html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex))); 
      return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex)); 
     } 

     public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix) 
     { 
      return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix); 
     } 

     private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName) 
     { 

      string key = idsToReuseKey + collectionName; 
      var queue = (Queue<string>)httpContext.Items[key]; 
      if (queue == null) 
      { 
       httpContext.Items[key] = queue = new Queue<string>(); 
       var previouslyUsedIds = httpContext.Request[collectionName + ".index"]; 
       if (!string.IsNullOrEmpty(previouslyUsedIds)) 
        foreach (string previouslyUsedId in previouslyUsedIds.Split(',')) 
         queue.Enqueue(previouslyUsedId); 
      } 
      return queue; 
     } 

     private class HtmlFieldPrefixScope : IDisposable 
     { 
      private readonly TemplateInfo templateInfo; 
      private readonly string previousHtmlFieldPrefix; 

      public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix) 
      { 
       this.templateInfo = templateInfo; 

       previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix; 
       templateInfo.HtmlFieldPrefix = htmlFieldPrefix; 
      } 

      public void Dispose() 
      { 
       templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix; 
      } 
     } 
    } 
}

來源

2013-10-03 mattbloke

使用的FormCollection的，所以不是這樣：

[HttpPost] 
public ActionResult Create(ClaimsViewModel viewModel) 
{ 
}

你都會有這樣的：

[HttpPost] 
public ActionResult Create(FormCollection formCollection) 
{ 
}

你應該能夠得到的價值爲你使用他們的名字，像這樣創建的任何新的領域：

var newFieldValue = formCollection["newFieldName"];

來源

2013-11-06 16:36:47

用於AJAX的POSt方法動態創建輸入字段

回答

相關問題