locked
Json result updating the div with full view again RRS feed

  • Question

  • User1751533545 posted

    HI,

    I am having a view, in that i am displaying html tables with records from db.

    I am having one ddl  and a table as follows in the view (not partial view)

    script type="text/javascript">
        $(document).ready(function () {
            $("#tblbranchdeatails tr:even").css("background-color", "#E6E7E9;");
    
            $("#ListofBranchIDss").on("change", function (e) {
              
                var selected = $(this).children("option:selected").text();
                alert(selected);
                debugger;
                $.ajax({
                    type: "POST",
                    data: {
                        value: selected,
                    },
                    url: "Sources/Sourcess",
                    success: function (result) {
                        debugger;
                       // alert(result.data);
                        $("#resultdiv").html(result);
                    },
                    error:function(res){alert(res.statusText);}
                });
    
             
            });
            
        });
        </script>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Sources</title>
    </head>
        <body style="background-color:#bfd0e4;margin:0 auto;">
            <table style="width:100%;height:100%;">
                <tr style="vertical-align:top;">
                    <td style="width:60%">
                        <div id="heading" class="branchheading">SOURCE DETAILS</div>
                        
                            <div id="dropdownlist" class="branchidddl">
                                <p>Filter Basedon BranchID:      
                              @Html.DropDownList("ListofBranchIDss", "selectedValue") </p>
                            </div>
                        <div id="resultdiv">
                            <table   id="tblbranchdeatails" class="clsbranchtable" style="margin-top:5px;">
                                <tr class="tblheadtr">                    
                                    <th>
                                        @Html.DisplayNameFor(model => model.SourceTypeID)
                                    </th>
                                    <th>
                                        @Html.DisplayNameFor(model => model.SortOrder)
                                    </th>
                                    <th>
                                        @Html.DisplayNameFor(model => model.BranchID)
                                    </th>
                                    <th style="display:none">
                                        @Html.DisplayNameFor(model => model.IsDisabled)
                                    </th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                  @foreach (var item in Model) {
                                <tr>
                                    
                                    <td class="tdclass">
                                        @Html.DisplayFor(modelItem => item.SourceTypeID)
                                    </td>
                                    <td class="tdclass">
                                        @Html.DisplayFor(modelItem => item.SortOrder)
                                    </td>
                                    <td class="tdclass">
                                        @Html.DisplayFor(modelItem => item.BranchID)
                                    </td>                                
                                    <td class="tdclass">
                                        @Html.ActionLink("Edit", "Edit", new { sourceid = item.SourceID },new { @class = "editSourceDialog"})   
                                    </td>
                                     @{  
                                        if (item.IsDisabled==true)  {
                                            <td class="lnkenabletd">              
                                            @Html.ActionLink("Enable", "Delete", new { sourceid = item.SourceID,enabledisableflag=false }, new { @class = "lnkenable"})
                                            </td>
                                        }
                                    else
                                        {
                                            <td class="tdclass">
                                            @Html.ActionLink("Disable", "Delete", new { sourceid = item.SourceID,enabledisableflag=true }, new { @class = "lnkdiasbale"})
                                            </td>
                                         }
                
                                    }
                                </tr>
                                  }
                            </table>
                            </div>
                         <p class="pstyle">
                            @Html.ActionLink("Create New Source", "Create","Source", new { @class = "addSourceDialog"})        
                         </p>
                        <div id="dialog-edit-source" style="display: none;"></div>
                    </td>
                    <td >
                        <img src="/Images/blue_overlay.jpg">
                    </td>
                    <td style="width:30%">
                   <div class="firstlink"> 
                          
                             @Html.ActionLink("Source", "Sources", "Source", new { }, new { @class = "samepagelink" })                  
                    </div>
                    <div class="secondlink">                            
                          @Html.ActionLink("Branch ", "Branch", "Branch", new { }, new { @class = "anotherpagelink" })             
                    </div>
                    <div class="secondlink"> 
                          @Html.ActionLink("Source Types", "SourceTypes", "SourceType", new { }, new { @class = "anotherpagelink" })                
                    </div>
                     <div class="holidayinn"><img src="/Images/holiday_club_logo.png"></div> 
                </td>
                </tr>
            </table>
         </body>
    </html>

    I am filtering the html tbl data on change of ddl values using jquery ajax call

    Its calling the controller action and returning the model. But the problem is the div is updated with agian the full view not with only the table.So inside div the view is again displaying once again. I need to display only the html table inside div.not the full view.

    PLs find my controller action

     [HttpPost]
            public ActionResult Sourcess(string value)
            {
                ModelState.Clear();
                IEnumerable<SourceModel> filtereddata1 = null;
                model = new TrackerModel();           
                    model.sourceData = this.ppiService.GetSourceData();
                    List<int> branchidlist = new List<int>();
                    branchidlist = model.sourceData.Select(x => x.BranchID).Distinct().ToList();
                    ViewBag.ListofBranchIDss = branchidlist.Select(x => new SelectListItem() { Text = x.ToString() });
    
                    int branchidtofilter = (value == null || value == string.Empty) ? branchidlist[0] : Convert.ToInt32(value);
    
                    filtereddata1 = (from item in model.sourceData
                                     where item.BranchID == branchidtofilter
                                     select item);
    
                    ViewBag.selectedValue = branchidtofilter;
                    return Json(filtereddata1, JsonRequestBehavior.AllowGet);
            }

    Pls help me

    Thanks in advance

    Vidya

    Thursday, October 16, 2014 6:38 AM

Answers

  • User61956409 posted

    Hi Vidya,

    Thanks for your post.

    success: function (result) {
                        debugger;
                       // alert(result.data);
                        $("#resultdiv").html(result);
                    },
    

    Its calling the controller action and returning the model. But the problem is the div is updated with agian the full view not with only the table.

    According to above description and code, you get a model via ajax request, I’d like to know whether you could display the returned data in your target <div id="resultdiv">.

    Besides, could you upload your relevant project to OneDrive? it will be helpful for us to reproduce your problem.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 17, 2014 5:38 AM