Question

我正在制作一个带有多个按钮的表单，用户在点击按钮时收集可变数据。这些变量是使用javascript收集的，我将所有按钮设置为OnClientClick =“return false”;

这是因为我想避免重新提交表单，因为它会将当前的Bootstrap选项卡重置为1.

一旦用户到达最终选项卡并按下“保存”按钮，如何将使用JavaScript收集的所有变量传递给C＃代码？提前谢谢（我是所有这一切的新手）。

以下是一些JavaScript代码：

 //Variables for different ratings
var TotalRating = 0;
var ResponseRating = 0;
var ConditionRating = 0;
var SafetyRating = 0;
var InformationRating = 0;
var PrivacyRating = 0;
var PestRating = 0;
var FairnessRating = 0;
var Experience = "";
var Recommendation = "";

//STEP 1
//Styling: nothing required yet


//STEP 2
//Styling
$("#btnGood, #btnFair, #btnBad").click(function () {
    $("#Experience").slideUp();
    $("#Recommendation").fadeIn(1000);
});

$('#btnGood').click(function () {
    Experience = "Good";
});

$('#btnFair').click(function () {
    Experience = "Indifferent";
});

$('#btnBad').click(function () {
    Experience = "Bad";
});

这个想法是，一旦用户点击了save（在最后一个标签页上），就可以在后面的C＃代码中检索该体验变量并将其保存到SQL Server表中。

Answer 1

您可以使用对象而不是如此多的变量来存储用户信息。

然后，当准备提交时，所有收集的信息都在同一个地方，便于发送。

var userInputs = {
  TotalRating: 0,
  ResponseRating: 0,
  ConditionRating: 0,
  SafetyRating: 0,
  InformationRating: 0,
  PrivacyRating: 0,
  PestRating: 0,
  FairnessRating: 0,
  Experience: "",
  Recommendation: ""
};

//STEP 1
//Styling: nothing required yet


//STEP 2
//Styling
$("#btnGood, #btnFair, #btnBad").click(function () {
    $("#Experience").slideUp();
    $("#Recommendation").fadeIn(1000);
});

$('#btnGood').click(function () {
    userInputs.Experience = "Good";
});

$('#btnFair').click(function () {
    userInputs.Experience = "Indifferent";
});

$('#btnBad').click(function () {
    userInputs.Experience = "Bad";
});

使用ajax发送数据可以避免页面重新加载......

// The "save" button may look like this
$('#save').on("click",function () {

  $.ajax({
    url:"[your server ressource URL]",
    data:userInputs,
    method:"post",
    success:function(html){
      console.log("Data sent successfully.");
    },
    error:function(request,status,errorThrown){
      console.log(errorThrown);
    }
  });
});

详细了解Ajax usage。

<小时/> 的修改

如果我可以提出更多建议：

将值放在某些数据属性中可能是个好主意。

<button class="Answer" data-objectProperty="Experience" data-userAnswer="Good">Good</button>

这样做，只需要一个事件处理程序。

$('.Answer').on("click",function (e) {

  // Avoid the form submit.
  e.preventDefault();

  // Grab the value.
  var objProperty = $(this).data("objectProperty");
  var userAnswer = $(this).data("userAnswer");
  userInputs[objProperty] = userAnswer;
});

将多个JavaScript变量传递给ASP按钮单击事件后面的C＃代码

1 个答案: