需要 Javascript 或 jquery 代码将数据传递给控制器

Question

每次按下 <a> 标签时，我都需要提交表单。我需要跟踪 <a> 标签被按下的次数。它以 3 开头，每次提交时我们递增 6。我需要使用操作方法将此数字传递给 GetArticleData 控制器。

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

像这样制作一个 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");
                }
            });


        });

Post json 函数在提交时返回给控制器。希望对你有帮助。

Answer 2

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

需要 Javascript 或 jquery 代码将数据传递给控制器

Need Javascript or jquery code to pass data to controller

javascript

jquery

asp.net-mvc-3

asp.net-mvc-4