需要Javascript或jquery代码才能将数据传递到控制器

Question

Everytime <a> tag is pressed i need to submit form. I need to keep track the number of times <a> tag is pressed. It starts with 3 and every time its is submitted we increment by 6. I need to pass this number to GetArticleData Controller using Action Method.

@{
  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>

Controller

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

Partial View

@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

You GetArticleData() does not take any parameters indicating the skip and take values, and no where on the client do you store the values. Its not even clear why the model in the partial is HomePageModel when all you want is a collection of News items. And there is no reason for a form (its a GET method).

The basic approach is

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
  }
}

Partial view

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

Main View

<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

Make a json object like this.

$("#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");
                }
            });


        });

Post the json function back to controller on submit. Hope it helps.