We help IT Professionals succeed at work.

asp.net c#, jquery, webmethod

ITsolutionWizard
ITsolutionWizard asked
on
I have jquery and I try to map with webmethod written in c#. but do not know what to do....with dictionary c#.
Please helps

<select  id="PRODUCT_LIST" name="PRODUCT_LIST"> should show up
like
<option value="1">1000</option>
<option value="2">2000</option>

Thanks,



<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tester5.aspx.cs" Inherits="AppService.Tester5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<select onchange="ShowList()" runat="server" required class="form-control" id="PRODUCT_CODE" name="PRODUCT_CODE">
                                                                    <option value="" disabled="disabled" selected="selected" class="disabled">Product Code</option>  
                                                                    <option value="13081">13081</option>  
                                                                    <option value="13082">13082</option>                                            
                                                                </select>                                                                                      
<br />
<select  onchange="ShowList()"  runat="server" required class="form-control" id="PRODUCT_STATE" name="PRODUCT_STATE">
                                                                    <option value="" disabled="disabled" selected="selected" class="disabled">Product State</option>  
                                                                    <option value="ND">ND</option>        
                                                                    <option value="OH">OH</option>                                                                                                                
                                                                    <option value="ZZ">All Others</option>                                            
                                                                </select>          
<br />  
<select style="display:none;"  runat="server" required class="form-control" id="PRODUCT_LIST" name="PRODUCT_LIST"></select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    function ShowList() {
            $.ajax({
                type: "POST",
                url: "Tester5.aspx/GetList",
                data: '', //?
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        //?
     }
</script>
</asp:Content>

//code behind:

[System.Web.Services.WebMethod]
        public static Dictionary<string,string>GetList(string PRODUCT_CODE, string PRODUCT_STATE)
        {
            Dictionary<string,string> s = new Dictionary<string,string>();
            s.Add("1", "1000");
            s.Add("2", "2000");
            return s;
        }
Comment
Watch Question

View Solution Only

Manoj PatilSr. Software Engineer

Commented:
What you need to do exactly ??
ITsolutionWizard

Author

Commented:
I need below shown.

<select  id="PRODUCT_LIST" name="PRODUCT_LIST"> should show up
like
<option value="1">1000</option>
<option value="2">2000</option>
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
Wild guess, logic is something like below, you need to check what you get in response object from OnSuccess function and need to modify bit of code below
function OnSuccess(response) {
        $.each(msg.d, function(index, item) {
                    $('#PRODUCT_LIST').append($('<option />').val(this['Key']).text(this['Value']));
        });
}

Open in new window

ITsolutionWizard

Author

Commented:
Try it already and does not seem work.
Can u put it in working codes ?
IT Professional
Top Expert 2015
Commented:
Please find the working code!
snapshot_drpddict.png
In Web method
//[System.Web.Services.WebMethod]
public string GetList()
{
	Dictionary<string, string> s = new Dictionary<string, string>();
	s.Add("1", "1000");
	s.Add("2", "2000");

	//Need to modify dictionary to JSON format
	var kvs = s.Select(kvp => string.Format("\"{0}\":\"{1}\"", kvp.Key, string.Concat("", kvp.Value)));
	return string.Concat("{", string.Join(",", kvs), "}");
}

Open in new window


In script
<script type="text/javascript">
    function ShowList() {
            $.ajax({
                type: "GET",
                url: "Home/GetList",
                data: '', //?
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        $.each(response, function (index, item) {
            $('#PRODUCT_LIST').append($('<option />').val(index).text(item));
        });
        $('#PRODUCT_LIST').show();
    }
</script>

Open in new window

ITsolutionWizard

Author

Commented:
Thanks if we now use wcf ....what do we need to change ?
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
I guess, I have answered to your question with working code!

Note: Please ask other question in separate thread to get better answer!

However,
Answer: you need to consume wcf service in your webmethod and then, (I think) you know what to do in webmethod, right?