Using ng-switch in Angularjs

0

ng-switch :

ng-switch basically provide us with a functionality to switch views on some client action. This action could be through a drop-down  option change, button click or any other such client action.

For Example :

  <select ng-model="stockShow">

                                <option value="complete">Complete</option>

                                <option value="Receipt">Receipt</option>

                                <option value="Issue">Issue</option>

                                <option value="Balance">Balance</option>

                            </select>

 

Here we have just made a model named stockShow.

 <div ng-switch="stockShow">

                            <div ng-switch-when="complete">

                            <p>This is complete stock div</div>

                           </div>

                            <div ng-switch-when="Receipt">

                                 <p>This is receipt div </p>

                           </div>

  <div ng-switch-when="Issue">

<p>This will give issue div</p>

</div>

</div>

Here, when the user will select certain option , the option value div will become active.

Caution : 

ng-switch has its own scope inside the div in which it is declared, so if you required to have others model in the ng-swtich div. Then we must have to first  declare them implicitly at the controller of the page. That will help us to work with nested scopes in angularjs.

Read More »

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 »

Making Add Row functionality in Html table using jquery

0

Step 1:

Add Jquery download file or use the CDN provided :


<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Step 2:

Make your html table ..

 <h3>Add/ Delete Row </h3>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-9">
            <table class="table table-responsive" id="maintable">
                <thead>
                    <tr>
                        <th class="sno">S.No</th>
                        <th class="Particular">Particulars</th>
                        <th class="Qty">Qty</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="data-contact-person">
                        <td>
                                               
                            <input type="text" id="Pro_Sno" value="1" class="form-control " /></td>
                        <td>
                            <input type="text" id="Pro_Part" class="form-control" /></td>
                        <td>
                            <input type="number" id="Pro_Quant" class="form-control" /></td>
                        <td>
                            <button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd" ">Add More</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    <div class="col-md-2"></div>
</div>


Step 3:
//This is the javascript code file :

<script type="text/javascript">
    
    $(document).ready(function () {
        $(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons

            var rowCount = $('.data-contact-person').length + 1;
            var contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" value=' + rowCount + ' id="Pro_Sno" class="form-control" /></td>' +
                '<td><input type="text" id="Pro_Part" class="form-control" /></td>' +
                '<td><input type="number" id="Pro_Quant" class="form-control" /></td>' +
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';
            $('#maintable').append(contactdiv); // Adding these controls to Main table class
        });

        $(document).on("click", ".deleteContact", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 

        });


 });

Note :  I have used bootstrap files here just to provide some css, its optional, if required add bootstrap file too.

Step 4:

Run the Application

You will get the output like this : 

Read More »

Entity Framework Development Approaches

0

This article is taken from msdn.microsoft.com, it was a necessary part so i provided the content here also.


The Entity Framework is the easiest ORM framework to learn for an ASP.NET developer. Because Microsoft continues to focus ORM development efforts on the Entity Framework, Microsoft and third parties continue to produce new tutorials, videos, and books. Most new tutorials use the Entity Framework even if they are focused on some other technology, such as the latest release of MVC or new model binding features for Web Forms in ASP.NET 4.5.


There are three ways you can work with data models and databases in the Entity Framework:Database First, Model First, and Code First.

• Database First
  If you already have a database, the Entity Framework designer built into Visual Studio can automatically generate a data model that consists of classes and properties that correspond to existing database objects such as tables and columns. The information about your database structure (store schema), your data model (conceptual model), and the mapping between them is stored in XML in an .edmx file. The Entity Framework designer provides a graphical UI that you can use to display and edit the .edmx file.
• Model First
  If you don't have a database yet, you can begin by creating a model in an .edmx file by using the Entity Framework graphical designer in Visual Studio. When the model is finished, the Entity Framework designer can generate DDL (data definition language) statements to create the database. As in Database First, the .edmx file stores model and mapping information.
• Code First
  Whether you have an existing database or not, you can use the Entity Framework without using the designer or an .edmx file. If you don't have a database, you can code your own classes and properties that correspond to tables and columns. If you do have a database, Entity Framework tools can generate the classes and properties that correspond to existing tables and columns. The mapping between the store schema and the conceptual model represented by your code is handled by convention and by a special mapping API. If you let Code First create the database, you can use Code First Migrations to automate the process of deploying the database to production. Migrations can also automate the deployment of database schema changes to production when your data model changes.

Choose Code First for new development unless you want to use a graphical designer to model database objects and relationships. The Entity Framework designer only works with Database First and Model First. Before you choose Database First or Model First, however, consider how you want to handle updates to the data model after you create the database, and how you want to deploy the database and deploy updates to it. Code First Migrations automates the process of implementing and deploying database schema changes that result from data model changes. The advantages of Code First Migrations might outweigh the advantages of the Entity Framework designer.

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 »