需要Javascript或jQuery代碼將數據傳遞給控制器​​

Question

每次<a>標記被按下，我需要提交表單。我需要跟蹤<a>標籤被按下的次數。它以3開頭，每次提交時我們都增加6.我需要使用Action Method將此數字傳遞給GetArticleData Controller。

@{ 
    Layout = "~/Views/Shared/_MasterLayout.cshtml"; 
    AjaxOptions ajaxOpts = new AjaxOptions 
    { 
    UpdateTargetId = "tableBody", 
    Url = Url.Action("GetArticleData") 
    }; 
}     

<div class="headlines-show-more"> 
    @using(Ajax.BeginForm(ajaxOpts)) 
    { 
    <a class="button-add-content" href="#">Show More News</a> 
    } 
</div> 

<div id="tableBody"> 
    @Html.Action("GetArticleData"); 
</div> 

控制器

public PartialViewResult GetArticleData() 
{ 
    HomePageModel model = new HomePageModel(); 
    model.GetDetails(); 
    return PartialView(model); 
} 

管窺

@model Models.HomePageModel 

@foreach(var item in Model.HeadlinesNews.Skip(0).Reverse().Take(9)) 
{                  
    <a href="@Url.Action("Index", "Article", new { id = item.PKNewsId, title = item.NewsTitle.Replace(' ', '-') })"> 
    <span> 
     <span>@item.Category</span> 
     <span></span> 
     <img src="@Url.Content("~/Uploads/Images/" + item.Image)"> 
     <span> 
     <span></span> 
     <p>@item.NewsTitle</p> 
     </span> 
    </span>  
    </a>                       
}       

Answer 1

您GetArticleData()不採取任何參數指示skip和take值，並且沒有在客戶端的哪裏存儲值。它甚至不清楚爲什麼模型在部分是HomePageModel當你想要的是News項目的集合。而且沒有任何形式的原因（它是一種GET方法）。

的基本方法是

public PartialViewResult GetArticleData(int skipCount, int takeCount) 
{ 
    // return a collection of news items based on skip and take, for example 
    var model = (from news in db.News orderby news.ID select news).Skip(skipCount).Take(takeCount); 
    if (model.Any()) 
    { 
    return PartialView(model); 
    } 
    else 
    { 
    return null; // let the client know there is no point calling this again 
    } 
} 

局部視圖

@model IEnumerable<News> 
@foreach(var item in Model) 
{ 
    // Generate html for a news item 
} 

主視圖

<button id="more">Show more news</button> 
<div id="news"> 
    // Initially display the first 3 items 
    @Html.Action("GetArticleData", new { skipCount = 0, takeCount = 3 }) 
</div> 

<script> 
    var skip = 3; // start at the 4th record 
    var take = 6; // return 6 records at a time 
    var hasMoreRecords = true; 
    var url = '@Url.Action("GetArticleData")'; 
    $('#more').click(function() { 
    if (!hasMoreRecords) { 
     return; 
    } 
    $.get(url, { skipCount: skip, takeCount: take }, function(response) { 
     if (!response) { 
     hasMoreRecords = false; // signal no more records to display 
     } else { 
     $("#news").append(response); // append the returned html 
     skip += take; // update for next iteration 
     } 
    }); 
    }); 
</script> 

Answer 2

作出這樣一個JSON對象。

$("#submit").click(function() { 
      var ContactID = $("#txtContactId").val(); 
      var Name = $("#Name").val(); 
      var Gender = $("#Gender").val(); 
      var DOB = $("#DOB").val(); 
      var Photo = $("#Phto").val(); 
      var PersonTypeID = $("#PersonTypeID").val(); 
      var Address1 = $("#txtAddress1").val(); 
      //var Address2 = $("#txtAddress2").val(); 
      var City = $("#txtCity").val(); 
      var State = $("#txtState").val(); 
      var PostalCode = $("#txtPostalCode").val(); 
      var VatNo = $("#txtVatNo").val(); 
      var RegNo = $("#txtRegNo").val(); 
      var Phone = $("#txtPhone").val(); 
      var Email = $("#txtEmail").val(); 
      var AdrKey = $("#AdrID").val(); 


      $.ajax({ 
       url: "Person/Create", 
       data: { 
        //'ContactID': ContactID, 
        'Company': Company, 
        'Status': Status, 
        'IsActive': IsActive, 
        'Comments': Comments, 
        'Country': Country, 
        'Address1': Address1, 
        //'Address2': Address2, 
        'City': City, 
        'State': State, 
        'PostalCode': PostalCode, 
        'VatNo': VatNo, 
        'RegNo': RegNo, 
        'Phone': Phone, 
        'Email': Email 
       }, 
       dataType: "json", 
       type: 'POST', 
       success: function (data) { 
        alert("Successfully Inserted!"); 
       }, 
       error: function() { 
        alert("error"); 
       } 
      }); 


     }); 

將json函數返回給控制器提交。 希望它有幫助。