如何使用JQuery / Ajax-MVC2将Checkbox用作按钮单击事件

时间:2011-07-01 23:45:51

标签: jquery ajax asp.net-mvc-2

此代码输出是我在单击按钮时将显示的文本框中输入的内容。但是当我选择复选框时,我想要,然后在文本框中输入要渲染的值。

//View page: In this page JQuery for request&Responce type and i am displaying two text box and 1 check box and 1 button

<script type="text/javascript">

     $(function(){
         $('#selectAll').change(function () {
             alert("value changed");//When i run this script only witht this alert function i am getting output but with this code i am unable to get the output what i expect

          var options = {
        target: '#result-user', // id of the div where we are going to display result
              beforeSubmit: showRequest,
              success: showResponse,
              type: 'post',
              resetForm: true
          };
          $('#form-user').ajaxForm(options); // id of the form we wish to submit
      });
  });


      function showRequest(formData, jqForm, options) {
          $("#result-user").empty().html('Loading....');
          $("#form-user :input").attr("disabled", true); // disable all form inputs while loading
      }



      function showResponse(responseText, statusText, xhr, $form) {
          $("#result-user").empty().html(responseText);
          $("#form-user :input").attr("disabled", false);
      }
  </script>
</head>

<body>

  <% using (Html.BeginForm("Index","Home",FormMethod.Post, new { id="form-user", name="form-user"})) {%>

      <fieldset>
          <legend>Fields</legend>
<div class="editor-label">
              <%= Html.LabelFor(model => model.FirstName) %>
          </div>
          <div class="editor-field">
              <%= Html.TextBoxFor(model => model.FirstName) %>
              <%= Html.ValidationMessageFor(model => model.FirstName) %>
          </div>
         <div class="editor-label">
              <%= Html.LabelFor(model => model.LastName) %>
          </div>
          <div class="editor-field">
              <%= Html.TextBoxFor(model => model.LastName) %>
              <%= Html.ValidationMessageFor(model => model.LastName)%>
          </div>
          <div>
          <input type="checkbox" name="selectl" value="ON" id="selectAll"/>
          </div>
          <p>
              <input type="submit" value="Save" />
          </p>

控制页

public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(HomeModel data)
    {
        return Content("You submitted: " + data.FirstName + " " + data.LastName);

    }

}

模型页面

public class HomeModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }

}

此代码的实际输出是在按下按钮时显示在文本框中输入的内容。但是当我选择复选框时,我希望输出如 我在文本框中输入的内容应该是呈现。

请帮帮我朋友。

1 个答案:

答案 0 :(得分:0)

ajaxForm不提交表单。它只是将表单设置为在单击提交按钮时通过ajax提交。

ajaxForm(options)更改为ajaxSubmit(options)。这应该做的伎俩(只是尝试过它,它的工作原理)。