Friday, May 24, 2019

Difference between RenderBody, RenderPage and RenderSection in MVC



This question is a real interview question of Gurgaon, Haryana company. I am trying to explain it with practical way.

CLICK HERE for My Youtube tutorial Videos

Let’s see the definitions of These:

 RenderBody Method: This method is declared inside master page. Generally known as Layout page in MVC. This method indicates that where your page contents will display.
Related Question: Can a Layout page has more than 1 RenderBody method?
Answer: NO. It will show following exception.
System.Web.HttpException: 'The "RenderBody" method has already been called.'

Syntax: @RenderBody()

RenderPage Method: This method is helpful to fill contents from other pages.
Related Question: Can a Layout page has more than 1 RenderPage method?
Answer: YES.
Syntax: @RenderPage("~/Views/Shared/_Header.cshtml")
_Header is the name of file. Its content will display where RenderPage method is used.

RenderSection Method: This method is used to show the contents of any section defined in the pages. It is helpful when your page many sections in the page and you want show any single or particular number of sections of the page.
Example of defining section in individual pages:
@section footer{
<b>From About Page</b>
}
@section MySection{
<b>My Custom Section - About Page</b>
}
Syntax of method: @RenderSection("MySection", false). Second parameter is optional, if not given, it will mandatory to declare section in page. ‘false’ shows non-mandatory.
Related Question: Can a Layout page has more than 1 RenderSection method?
Answer: YES.

teps to practice:
Step 1: Create an MVC project and name it with any Name.
Step 2: Open _Layout.cshtml file from Solution Explorer.
Step 3: Inside layout file, write following code to understand above methods-
@RenderPage("~/Views/Shared/_Header.cshtml")
       
        @RenderBody()
       
        @RenderPage("~/Views/Shared/_Header2.cshtml")
        @RenderPage("~/Views/Shared/_Header.cshtml")
        @RenderSection("footer",false)
        <hr />
        @RenderSection("MySection", false)
Step 4: Create a View inside Shared folder with name - _Header. And write following code:
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Header</title>
</head>
<body>
    <div>
        <h2>This is from Header Page Text</h2>
    </div>
</body>
</html>
Step 5: Create a View inside Shared folder with name - _Header2. And write following code:
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Header</title>
</head>
<body>
    <div>
        <h2>This is from Header 2 Page Text</h2>
    </div>
</body>
</html>
Step 6: Open View Contact.cshtml and create sections at bottom inside it:
@section footer{
    <b>From Contact Page</b>
}
@section MySection{
    <b>My Custom Section - Contact Page</b>
}
Step 7: Open View About.cshtml and create sections at bottom inside it:
@section footer{
    <b>From About Page</b>
}
@section MySection{
    <b>My Custom Section - About Page</b>
}

How to practice:
Save the changes and run the MVC project. See the changes in page by clicking on the menu options (HOME, ABOUT, CONTACT).
Remove method syntax one by one from the Layout page -> run again -> see changes. Then again add one by one and see again changes.

I hope this exaplanation will help.
Happy Coding.

Rudra Pratap Singh
Software Engineer

Saturday, March 2, 2019

jQuery Learning with Real Development Tasks. Task-9 Source code

You can find here source code for jQuery Practice with Real Task- Part 9.

YouTube link for this task video is given below :

TASK - 9: Fill/Clear Drop Down Options on Button Click

Preview is:
CODE:

<!DOCTYPE html>
<html>
<head>
    <title>Task-9: Fill/Clear Drop Down Options on Button Click</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <div>
        <select id="DDLBooks">
            <option value="">Select Book</option>
        </select>
        <input type="button" value="Add Books" id="btnAddBooks" />
        <input type="button" value="Clear Books" id="btnClearBooks" />
    </div>
    <script>
        var AllBooks = ["C#", "PHP", "Java", "Python"];// Array
        $('#btnAddBooks').click(function () {
            var AllBooksLength = AllBooks.length;// total number of books in Array
            // loop to add books in DDL
            for (var i = 0; i < AllBooksLength; i++) {
                $('#DDLBooks').append(new Option(AllBooks[i], AllBooks[i]));
            }
        });
        $('#btnClearBooks').click(function () {
            $('#DDLBooks').empty(); // clear the DDL
            $('#DDLBooks').append(new Option("Select Book", ""));// to add default option
        });
    </script>
</body>

</html>

Happy coding.
Rudra Pratap Singh
Software Engineer

Wednesday, February 27, 2019

jQuery Learning with Real Development Tasks. Task-8 Source code

You can find here source code for jQuery Practice with Real Task- Part 8

YouTube link for this task video is given below :

TASK- 8Check/Uncheck Check Boxes on Check/Uncheck of a checkbox

Preview is:

CODE:

<!DOCTYPE html>
<html>
<head>
    <title>Task-8: Check All Check Boxes on Click of a Check Box</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <div>
        <input type="checkbox" id="chkSelectAll" />Select All <br />
        <input type="checkbox" class="chk" /> Option-1 <br />
        <input type="checkbox" class="chk" /> Option-2 <br />
        <input type="checkbox" class="chk" /> Option-3 <br />
    </div>
    <script>
        $('#chkSelectAll').on('click', function () {
            if ($('#chkSelectAll').is(':checked')) // check that checkbox is checked or not
            {
                // code for, if checked
                $('.chk').prop('checked',true); // check all controls having class 'chk'
            }
            else
            {
                $('.chk').prop('checked', false);
            }
        });
    </script>
</body>

</html>

Happy coding.
Rudra Pratap Singh
Software Engineer

Saturday, February 23, 2019

jQuery Learning with Real Development Tasks. Task-7 Source code

In this blog you can find Source Code for jQuery Practice with real Task- Part -7.

I highly recommend to see Video of Part 6 to understand creation of controls dynamically using jQuery.

Links are :

Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
Task-7 jQuery Practice: Remove Dynamically Added Rows.

CLICK HERE to get Source Code of Task -6.

Code for Task 7 is given below: 

<body>
    <table style="border:1px solid blue;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th><input type="button" value="ADD" id="btnADD"></th>
            </tr>
        </thead>
        <tbody id="tblEmpData">
            <tr id="TR_1">
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('#btnADD').click(function () {
            var TotalRowsinTBody = $('#tblEmpData >tr').length; // Total Existing Rows of Tbody
            var NewRowNumber = TotalRowsinTBody + 1; // code for id of new genrating rows
            var dynamicHtmlText = "<tr id='TR_" + NewRowNumber + "'>"; // here we have to give id
            dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
            dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
            dynamicHtmlText += "<td><input type='button' value='Remove' onclick='DeleteRow(" + NewRowNumber + ")' ></td>";//
            dynamicHtmlText += "</tr>";
            // Add to tbody
            $('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
        });
        function DeleteRow(rowNumber)
        {
            $('#TR_' + rowNumber).remove(); // remove specified row.
        }
       
    </script>
</body>

Happy coding.
Rudra Pratap Singh
Software Engineer


jQuery Learning with Real Development Tasks. Task-6 Source code

You can find here source code for jQuery Practice with real Task- Part 6

YouTube link for this task video is given below :

Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button

<!DOCTYPE html>
<html>
<head>
    <title>Task-6: Add Control Dynamically on Button Click</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <table style="border:1px solid blue;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th><input type="button" value="ADD" id="btnADD"></th>
            </tr>
        </thead>
        <tbody id="tblEmpData">
            <tr>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('#btnADD').click(function () {
            var dynamicHtmlText = "<tr>";
            dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
            dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
            dynamicHtmlText += "<td>&nbsp;</td>";// for 3rd td
            dynamicHtmlText += "</tr>";
            // Add to tbody
            $('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
        });
    </script>
</body>
</html>


Happy coding.
Rudra Pratap Singh
Software Engineer

How to Get Organic Views on Your Channel/Content

 Hi Friends, This post will be very short and specific in the information.  If you are a content creator and want some help in getting organ...