Sending Dynamic Table Data to Server Side

0

Step 1: Add the jquery main file.

Step 2:  Add the following Code.

 function saveValues( ) {
  var tableMatRequire = [];
        $('#matReqTable tr').each(function (row, tr) {
            tableMatRequire.push({
                IndentNo: $('.indentClass').val(),
                MatReqName: $(tr).find('td:eq(1)').find('#matReqPart').val(),
                MatQuantity: $(tr).find('td:eq(2)').find('#matReqQuant').val()
            });
        });
        tableMatRequire.shift();
sendData(tableMatRequire);
}

Note:  Here 'matReqTable' is the table ID,

matReqPart is the table column id, here it is textbox, if you have label then just do,

 MatReqName: $(tr).find('td:eq(1)').val(),

Step 3: In the above step we have save the dynamic table values in an array..

Now, pass this array by ajax to the server control function :


Add the following code :

function sendData(tableMatRequire)
{
 $.ajax({
            type: "POST",
            url: "/Indent/Index",  // Here pass the required url
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
             
                MatReq: tableMatRequire,
               
            }),
            success: function (data) {
                alert("Data send !");
            }

        });
}

Read More »

How to make textbox, dropdownlist combination control using ajax combobox in asp.net

0

Step 1 :

Add the AjaxControlToolkit Reference to your asp.net website and register its assembly on the required page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Step 2:

Add the ToolkitScriptManager above any ajax tool, using this code,

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

Step 3:

Now add the following combobox ajax control, combobox is a combination of textbox and dropdown with all dropdown properties and few additional.

<asp:ComboBox ID="ddlRequestTo" runat="server" DropDownStyle="Simple" AutoCompleteMode="SuggestAppend" CssClass="col-md-9">

</asp:ComboBox>

Some Imp Points :

DropDownStyle :

• Simple :- Any text is allowed and the list is always displayed.
• Dropdownlist :- User are not allowed to enter text that does not match an item in the list.
• DropDown :- (default value), any text is allowed

AutoCompleteMode :

• Suggest :- The combobox will show the list, highlight the first matched item.
• Append :- The combobox will append the remainder of the first matched item to the user-typed text and highlight the appended text.
• None :- (default value), Combobox autocomplete behavior is disable.
• SuggestAppend :- Both behavior of append and suggest will be applied.

Now, in case if you need to enhance or override the default css of the combobox, you can do it as follows :

For Textbox container use the following id :

.ajax__combobox_textboxcontainer {

}

For textbox container input box

.ajax__combobox_textboxcontainer input {

}

For Dropdown list items :

.ajax__combobox_itemlist {

}

When changing itemlist css do add the !important tag as below :

.ajax__combobox_itemlist {

top: 0px !important;

width: 80% !important;

left: 185px !important;

}

Read More »

Using ValidatorCalloutExtender to Enhance RequiredFieldValidator to validate.

0

Step 1 : First you require Ajaxtoolkit to be added to your  asp.net toolbox.

Step 2: 
Add the RequiredFieldValidator control from toolbox for textbox control to validate.

Step 3: 
Add the ToolkitScriptManager control from the toolbox just below the form tag.

Step 4:
Use the ValidatorCalloutExtender control from the ajax toolkit tools which you have got after adding ajaxtoolkit.dll to the toolbox.


The code must look like this :

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<span> First Name</span>

<asp:TextBox ID="txtFirstName" runat="server" ></asp:TextBox>

<asp:RequiredFieldValidator ID="rqdFirst" runat="server" ControlToValidate="txtFirstName" ErrorMessage="Enter First name!" Display="None"></asp:RequiredFieldValidator>

<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="rqdFirst">

</asp:ValidatorCalloutExtender>

The output window will look like this :

Read More »

How to open new popup form on gridview button click ?

0

Step 1:

We will use ajaxtoolkit to open a new form on gridview button click or on normal button click.
You have to add reference to AjaxToolKit.dll, which you can found in the package of ajaxtoolkit from ajaxcontroltoolkit.codeplex.com.

Step 2:
You can also add Ajax tools into the asp.net toolbox, and then you can directly use its control from there, or you can hard-code.
 First, Register the DLL if you are preferring hard-code.

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


on design.aspx

<style type="text/css">

.tableBackground

{

background-color:silver;

opacity:0.7;

}

</style>

<asp:ToolkitScriptManager ID="ScriptManager1" runat="server"></asp:ToolkitScriptManager>

<asp:GridView ID="grdView" runat="server" AutoGenerateColumns="False"

onrowcommand="grdView_RowCommand">

<Columns>

<asp:TemplateField HeaderText="Emp Id">

<ItemTemplate>

<asp:Label ID="lblEmpId" runat="server" Text='<%#Eval("empId") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Generate Salary">

<ItemTemplate>

<asp:LinkButton ID="btnGenerateSalary" runat="server" Text="Generate Salary" CssClass="btn btn-info" CommandArgument='<%#Eval("empId") %>'></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:Button ID="modelPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="modelPopup" PopupControlID="updatePanel"

CancelControlID="btnCancel" BackgroundCssClass="tableBackground">

</asp:ModalPopupExtender>

<asp:Panel ID="updatePanel" runat="server" BackColor="White" style="display:none">

<div>

<span >Gross Salary</span>

<asp:Label ID="lblGrossSalary" runat="server"></asp:Label>

</div>

<asp:Button ID="btnCancel" runat="server" Text="Close" />

</asp:Panel>

The modalPopExtender will open the panel as a popup form :

on.cs

protected void grdView_RowCommand(object sender, GridViewCommandEventArgs e)

{

string empId = e.CommandArgument.ToString();

this.ModalPopupExtender1.Show();

}

//You can do any implementation here with the help of the empId, or any value that you will pass as commandargument.

Read More »