Pass Send AngularJS AutoComplete selected value as QueryString in ASP.Net

carocoding
 
on Aug 10, 2022 11:01 PM
Sample_669817.zip
455 Views

Hello everyone,

Pass AngularJS value as QueryString in asp.net c#

can i please have help on how to get this AngularJS input in an asp.net label?

i would like to pass it as a QueryString parameter

<div ng-app="MyApp" ng-controller="MyController">
    <div angucomplete-alt id="txtCustomers" runat="server" style="width:100%" placeholder="Entreprise" pause="100"
        selected-object="SelectedCustomer" local-data="Registerentreprise" search-fields="Nomentreprise"
        title-field="Nomentreprise" minlength="1" input-class="form-control" match-class="highlight">
    </div>
    {{SelectedCustomer.title}}
</div>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
Shivam.M
 
on Aug 11, 2022 05:47 AM

Hi carocoding,

Please refer below sample.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

Default

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="AnguAutoComplete/angucomplete-alt.js"></script>
<link href="AnguAutoComplete/angucomplete-alt.css" rel="stylesheet" />
<script type="text/javascript">
    var app = angular.module('MyApp', ['angucomplete-alt'])
    app.controller('MyController', function ($scope, $http, $window) {
        $scope.Customers = null;
        $scope.SelectedCustomer = null;
        $scope.Send = function () {
            var url = "Home.aspx?Name=" + encodeURIComponent($scope.SelectedCustomer.title);
            $window.location.href = url;
        };

        var post = $http({
            method: "POST",
            url: "Default.aspx/GetCustomers",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
        post.success(function (data, status) {
            $scope.Customers = data.d;
        });
        post.error(function (data, status) {
            $window.alert(data.message);
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <div angucomplete-alt id="txtCustomers" runat="server" style="width: 100%" placeholder="ContactName" pause="100"
        selected-object="SelectedCustomer" local-data="Customers" search-fields="ContactName"
        title-field="ContactName" minlength="1" input-class="form-control" match-class="highlight">
    </div>
    <br />
    <hr />
    Select Customer: {{SelectedCustomer.title}}
    <br />
    <input type="button" value="Send" ng-click="Send()" />
</div>

Home

<script type="text/javascript">
    window.onload = function () {
        var queryString = new Array();
        if (window.location.search.split('?').length > 1) {
            var params = window.location.search.split('?')[1].split('&');
            for (var i = 0; i < params.length; i++) {
                var key = params[i].split('=')[0];
                var value = decodeURIComponent(params[i].split('=')[1]);
                queryString[key] = value;
            }
        }
        if (queryString['Name'] != null) {
            document.getElementById("lblData").innerHTML = queryString['Name'];
        }
    }
</script>
<asp:Label ID="lblData" runat="server"></asp:Label>

Namespaces

C#

using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient

Code

C#

Default

[WebMethod]
public static List<object> GetCustomers()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT ContactName From Customers", con))
        {
            List<object> customers = new List<object>();
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(new { ContactName = sdr["ContactName"] });
                }
            }
            con.Close();
            return customers;
        }
    }
}

VB.Net

Default

<WebMethod>
Public Shared Function GetCustomers() As List(Of Object)
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand("SELECT ContactName From Customers", con)
            Dim customers As List(Of Object) = New List(Of Object)()
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(New With {Key _
                    .ContactName = sdr("ContactName")
                })
                End While
            End Using
            con.Close()

            Return customers
        End Using
    End Using
End Function

Screenshot