Part 8 – Generate HYPERLINKS Using ACTIONLINK Html Helper | ASP.NET MVC Application



hello welcome back to ESP dotnet MVC tutorial I am a sheesh so this is part 8 of this video series so before proceeding I would like to suggest you to watch my previous videos that is part 6 and part 7 of this video series in that video I just discussed about how can you connect your application with database and how can you work on multiple tables so here I'm going to discuss above that how can you create hyperlinks and button dynamically in MVC so now you can see my expected output would be this I will create this link or you can say button and when I click on this button I will just redirect to redirect to this table means it will show the detail of employee so here I have created a employee table and it has the department department ID which is the foreign key and my primary table is this department table has the department name ok now let's flip to the visual visual studio here you can see I have created two methods like index and for displaying the data details of the employee here my method is employed it is and how I have just passed one parameter that is employee ID here you can see I have just I'm just getting a single record with with single or single or default I am passing this parameter to this to get the single record of employee and now in my custom table I am getting the department name and the address from the employee you can see and now with the help of foreign key I have just I have just got the department name from employee dot Department or Department name here you can see and now I have just passed in Department and now if you go to view then I have just created the detail page here I am just displaying the employee name now you can see it comes from model so model dot name model dot address modeler Department name okay now come to the index method here I have just a got the list of employees from the entity and I have just filtered out the name and employee ID from the Employee List okay so basically this is my custom table you can see this is my custom table I have created ok and I am passing this so basically I will have the list of employee ID and name ok now come to view now here I have the list so I will just create model I know River and what is your project name right here dot models dot I'm going to because I have just passed my employee view model so I will use this so I just put in I in rebel because I have just passed the list of employee not a single record and if you see I have just passed the single record of employee that's why I did not use here you can see I in rebel I have not used okay so now come to index now fulfill our objective so here I will just make a sorry if if model okay this is not equal to another okay so this is the way of handling exception if model does not have any details then it will throw exception okay so first step is to check whether there is a data in model or not now I will create a unordered list and in the at least I will create several links not so this this list would be created dynamically so now here I am going to loop through each item in model so I will just put at the rate sign and I will check I sorry where item in my model okay okay so in model has consisted a lot of employees record list of records you can say so here in in the general HTML format I am just going to create the hyperlink okay so here I'm going to use anchor H ref equals okay so put a backslash and your what is your controller and write your controller name test slash and what is your method name so I'm going to copy it here okay and now this consists of parameter also so I will just copy employee ID and I will just paste here equals and I will pass ID dynamically so I will just put item dot employee ID okay and now in this section I will display the name so so I will have the item dot employee dot name okay so now here you can see just delete this okay now let's run this application and let's see what's going to happen here now here you can see I have just put the breakpoint here okay now I will just press f10 to move forward okay so I will I will get the Employee List here you can see a four count okay so I will just get a dress in department name and employee ID and employee name okay I am just filtering out the employee name and employee ID and just continue it okay and now go to view so here I will I will got the I have just got the list of employees okay so now let's use the bootstrap feature or bootstrap classes so if you are new to bootstrap then definitely I would like to suggest you to watch my bootstrap tutorial I will just put put the link in the description okay so that you can watch my bootstrap tutorial also so here I will put this class list group so list group and also I will just put the class list group here you can put the list item okay and here also you can put a class okay so now here you can simply yours Here I am just displaying a link okay so it will be converting into button so I will use bootstrap button bootstrap class s2 in our little generate button okay so button block and button let's say primary so in bootstrap well you can just decorate your anchor okay so now let's refresh it okay just to remove the break point and continue now here you can see your button so it consists the all you can say you can see in the table it just display the all employee employee ID employee name Department and address so now if if you see you if you see at the bottom left corner then in at the behind that you can see the link localhost / test / employee details and and I have just passed parameter employee ID and now I am just gonna put a breakpoint here and I will just click on I suppose John okay so John ID has passed inside the parameter and now I will just use break point here I am getting the employee okay employee record see his address so here I'm getting a single record by passing your ID and now I will get it's all detailed here its address name and the department name from department table now I just remove the breakpoint and let's continue it now here you can see the employee named John address okay now go back and just get the record of ashish so you can see employee name ashish address India and Department IIT okay so now this is a this is the HTML that I have used and now I am just going to use HTML helper so in the last video session I will discuss in the day so I am just going to use its extension method that is action link okay now I will just create a link with action HTML helper so you can see I can pass test or action name and the action name so so in order to get text so I I will just use item dot and its name okay now you can see the second parameter is action name so action name my action name would be this employee detail okay so I have just passed employee detail here so put it into the double quotes okay and now you can see it has nine overloaded method so if you if you put a comma then you can see object route value so how can you pass the parameter in this way so I have to pass employee ID okay so just I will pass employee ID equals to sorry item dot employee ID where is employee ID employee ID okay now let's let's go back and let's refresh it now again you can see the same output here now how can you put class here so that you can decorate to it so if you put a comma then again you can see the fourth parameter you can pass object HTML attribute here so put a new and pass at the rate class equals to I am just going to use this one copy and just refresh it here you can see also you can just put change the button color here in order to make it attractive so there are lot of option but an option in bootstrap I would like to suggest you to watch my booty step tutorial also ok so here you can either generate through SD your custom HTML or with the HTML helper okay so we will discuss this later now you can just click on John here so I got the John tail okay so I have just created this hyperlink using this and now if you just hover on it then at the bottom left corner you can see the URL pattern test employee I am passing the employee ID equal to two so if I click on this then you can see the URL so in HTML helper you just pass your text then your method name and your URL parameter so it may be optional okay so in this way you can generate your hyperlinks in order to call different methods present in the controller or you can say in the different controller you can call any method with your hyperlinks so it is basically used for doing various operation like edit delete so we will generate in later video session so that you can understand how can you create your form and how to delete update your your employee details so we'll discuss in later video session okay thank you very much for watching and if you really like then again gives attempt and gives a thumbs up and comment if you have any problem then please comment and subscribe my video thank you very much have a great day

9 thoughts on “Part 8 – Generate HYPERLINKS Using ACTIONLINK Html Helper | ASP.NET MVC Application

  1. hi sir , you are amazing i understood it easily thnx,and The meaning of your name is like cannabis, which is a drug
    in Egypt hhhhhhhhhhhhhhhh

  2. i cant understand where you create Employeeviewmodel as custom table ,because is in your database there only two tables,
    you are going well i.e help us to improve but you must show each step where and how you create this ,

  3. Can you make a video or give me hints how to retrieve all data using Department Hyperlink .
    Like a fetch data of Department .
    CSE
    EEE
    ARCHI
    now when I click on CSE ,it'll show me all CSE students .
    How can I do it?

  4. Sir, HI. Please I have a database in which employee Id is customized of type string, How do I view the employee details by fetching it using SingleOrDefault. Trying to use the same line from your tutrial but it is not working yet. Please help me! Thanks

  5. hy ashish I am getting an exception of Object reference not set to its instance in EmployeeDetail Action,Have u any solution for it?

  6. My face is red for not finding this and I thought I had searched and searched. I need to learn more about debugging and how to use it. Thank you Ashish, that answer came really quick.

  7. When I run the Index.Cshtml code the buttons work and direct me to the correct details page.
     <a class="btn btn-block btn-primary " href="/Test/EmployeeDetail
    [email protected]">@item.Name</a>

    When I run the Html helper code I get errors and page does not load.
    @Html.ActionLink(item.Name, "EmployeeDetail", new {EmnployeeId = item.EmployeeId},
    new { @class= "btn btn-block btn-primary" })

    I recieve this error in the browser. Does anyone have suggestion as to what is wrong?

     Server Error in '/' Application.The parameters dictionary contains a null entry for parameter 'EmployeeId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult EmployeeDetail(Int32)' in 'MVCTutorial.Controllers.TestController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
    Parameter name: parameters Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.ArgumentException: The parameters dictionary contains a null entry for parameter 'EmployeeId' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult EmployeeDetail(Int32)' in 'MVCTutorial.Controllers.TestController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
    Parameter name: parameters

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Leave a Reply

Your email address will not be published. Required fields are marked *