代码之家  ›  专栏  ›  技术社区  ›  Ivin Raj

asp.net mvc中的多Ajax加载问题

asp.net-ajax css html jquery javascript
  •  0
  • Ivin Raj  · 技术社区  · 6 年前

    我有一个下拉列表和文本框。当我选择一个下拉值并在文本框中输入值,然后单击submit按钮时,我在ajax函数中获得值。如果我再次点击提交按钮,在同一个表中加载值,但我的要求是通过清除先前显示的值来加载值?

    Jquery查询: 

    $(document).ready(function() {
  $("#btnSubmit").click(function(e) {
    e.preventDefault();
    var search = jQuery('[id$=txtsearchType]').val();
    var tittle = jQuery('[id$=txtName]').val();

    if (search != ' ' && tittle != '') {

      if (search == "getgeneric" || search == "getbrand") {
        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findValue").show();
              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[5] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + item[6] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });
      } else if (search == "getcompany") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findcompany").show();
              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      } else if (search == "getsubstitue") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findsubstitue").show();

              var ids = data[i];

              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item[1] + "</td>" +
                "<td>" + item[2] + "</td>" +
                "<td>" + item[3] + "</td>" +
                "<td>" + item[4] + "</td>" +
                "<td>" + item[5] + "</td>" +
                "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      } else if (search == "gettherapeutic") {

        $.ajax({
          type: "GET",
          contentType: "application/json; charset=utf-8",
          url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
          //data: "{ } ",
          dataType: "json",
          success: function(data) {
            var items = '';
            $.each(data, function(i, item) {
              $("#findgettherapeutic").show();

              var ids = data[i];

              var rows = "<tr>" +
                "<td>" + (i + 1) + "</td>" +
                "<td>" + item + "</td>" +
                "</tr>";
              $('#example tbody').append(rows);
            });
          },
          error: function(result) {
            alert("Error" + result);
          }
        });


      }


    } else {
      alert('Cannot blank must be filled out')
    }
  });

});

    HTML格式: 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
  <div class="card-block">
    <div class="row">
      <div class="col-lg-4">
        <fieldset class="form-group">
          @Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
          <select class="select2-arrow" id="txtsearchType" name="searchType">
            <option>-- Select Search Type --</option>
            <option value="getgeneric">Generic Search</option>
            <option value="getbrand">Brand Search</option>
            <option value="getcompany">Company Search</option>
            <option value="getsubstitue">Substitute Search</option>
            <option value="gettherapeutic">Therapeutic wise Search</option>
          </select>
          @Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
        </fieldset>
      </div>
      <div class="col-lg-4">
        <fieldset class="form-group">
          <label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName,
          "", new { @style = "color:red" })
        </fieldset>
      </div>
    </div>
    <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
    <span style="color:green">@ViewBag.Message</span>

    <br />
    <br /> @* getgeneric and getbrand *@
    <div class="table-responsive" id="findValue" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Generic Name</th>
            <th>Brand Name</th>
            <th>Strength</th>
            <th>Form</th>
            <th>Pack</th>
            <th>Price</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findcompany" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Brand Name</th>
            <th>Form</th>
            <th>Strength</th>
            <th>Pack</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findsubstitue" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Brand Name</th>
            <th>Manufacturer</th>
            <th>Strength</th>
            <th>Form</th>
            <th>price</th>
            <th>Actions</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    @* getcompany *@
    <div class="table-responsive" id="findgettherapeutic" style="display:none;">
      <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
        <thead>
          <tr>
            <th>ID</th>
            <th>Generic Name</th>
        </thead>
        <tbody></tbody>
      </table>
    </div>

  </div>
</section>
    2 回复  |  直到 6 年前
        1
  •  1
  •   tdayi    6 年前

    如果出现语法错误请与我分享 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="card">
    <div class="card-block">
        <div class="row">
            <div class="col-lg-4">
                <fieldset class="form-group">
                    @Html.LabelFor(model => Model.SearchType, new { @class = "form-label semibold control-label" })
                    <select class="select2-arrow" id="txtsearchType" name="searchType">
                        <option>-- Select Search Type --</option>
                        <option value="getgeneric">Generic Search</option>
                        <option value="getbrand">Brand Search</option>
                        <option value="getcompany">Company Search</option>
                        <option value="getsubstitue">Substitute Search</option>
                        <option value="gettherapeutic">Therapeutic wise Search</option>
                    </select>
                    @Html.ValidationMessageFor(model => model.SearchType, "", new { @style = "color:red" })
                </fieldset>
            </div>
            <div class="col-lg-4">
                <fieldset class="form-group">
                    <label class="form-label semibold control-label">Tittle</label> @Html.TextBoxFor(model => model.ProductName, new { @class = "form-control", @id = "txtName", placeholder = "Search Name" }) @Html.ValidationMessageFor(model => model.ProductName, "", new { @style = "color:red" })
                </fieldset>
            </div>
        </div>
        <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />
        <span style="color:green">@ViewBag.Message</span>

        <br />
        <br /> @* getgeneric and getbrand *@
        <div class="table-responsive" id="findValue" style="display:none;">
            <table id="tblFindValue" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Generic Name</th>
                        <th>Brand Name</th>
                        <th>Strength</th>
                        <th>Form</th>
                        <th>Pack</th>
                        <th>Price</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findcompany" style="display:none;">
            <table id="tblFindcompany" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Brand Name</th>
                        <th>Form</th>
                        <th>Strength</th>
                        <th>Pack</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findsubstitue" style="display:none;">
            <table id="tblFindsubstitue" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Brand Name</th>
                        <th>Manufacturer</th>
                        <th>Strength</th>
                        <th>Form</th>
                        <th>price</th>
                        <th>Actions</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        @* getcompany *@
        <div class="table-responsive" id="findgettherapeutic" style="display:none;">
            <table id="tblFindgettherapeutic" class="display table table-bordered" cellspacing="0" width="100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Generic Name</th>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</section>


    $(document).ready(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();

        var search = jQuery('#txtsearchType').val();
        var tittle = jQuery('#txtName').val();

        if (search == '' || tittle == '') {
            alert('Cannot blank must be filled out');
            return;
        };

        GetData(search, tittle, function (data) {

            var $html = '';
            var $table = null;
            var $displayItem = null;

            switch (switch_on) {

                case "getgeneric":
                case "getbrand":
                    $table = $('#tblFindValue > tbody');
                    $displayItem = $("#findValue");
                    $.each(data, function (i, item) {
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[5] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + item[6] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "getcompany":
                    $table = $('#tblFindcompany > tbody');
                    $displayItem = $("#findcompany");
                    $.each(data, function (i, item) {
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "getsubstitue":
                    $table = $('#tblFindsubstitue > tbody');
                    $displayItem = $("#findsubstitue");
                    $.each(data, function (i, item) {
                        var ids = data[i];
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item[1] + "</td>" +
                            "<td>" + item[2] + "</td>" +
                            "<td>" + item[3] + "</td>" +
                            "<td>" + item[4] + "</td>" +
                            "<td>" + item[5] + "</td>" +
                            "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>' +
                            "</tr>";
                    });
                    break;

                case "gettherapeutic":
                    $table = $('#tblFindgettherapeutic > tbody');
                    $displayItem = $("#findgettherapeutic");
                    $.each(data, function (i, item) {
                        var ids = data[i];
                        $html += "<tr>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + item + "</td>" +
                            "</tr>";
                    });
                    break;
            };

            $table.empty().append($html);
            $displayItem.show();
        });
    });
});

function GetData(search, tittle, successEvent) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
        //data: "{ } ",
        dataType: "json",
        success: function (data) {
            successEvent(data);
        },
        error: function (result) {
            alert("Error" + result);
        }
    });
};
        2
  •  0
  •   Ahmet Taşgöz    6 年前

    <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" /> <span style="color:green">@ViewBag.Message</span>

    <input type="button" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" /> <span style="color:green">@ViewBag.Message</span>

    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    4 月前
    Dr.0000FF  ·  jQuery按钮点击不显示/隐藏内容
    5 月前
    user28928120  ·  如何在jquery中选择所有类?
    5 月前
    LauraNMS  ·  如何使用Waypoints js实现粘性元素和偏移量
    5 月前
    Eliable  ·  使点击计数器和进度条协同工作
    6 月前
    mlri  ·  从不同的onclick事件执行相同的javascript函数
    6 月前
    Cymro  ·  如何将jquery$(this)与$(document).keyup一起使用
    6 月前
    Jack Maessen  ·  在处理程序上使用时如何获取输入类型
    6 月前
    BlueDogRanch  ·  使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)
    6 月前
    Jameel  ·  Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)
    6 月前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号