Featured Articles

Decoration

All Stories

Friday, 21 January 2022

Asp.Net Core 6: Upload and Preview Image Using C# In .Net Core (wwwroot)

In this article i will sow you how you can upload the image file in asp.net core 6 or mvc application using c#.net and display the upload image preview. 


Other Articles: Enum Return String Value C#Asp.Net Core 6: How to Search/Find Data Between Two Dates In MS Sql , Linq, C#.netAsp.net Core 6: Access/Read/Pass TextBox and TextboxFor Value From View To Controller In  C#.NetXML File Read(Parse) and Display In Table/Tabular Format in ASP.Net Core 6 / MVC Using C#.Net,  ASP.NET Core 6 : Ajax Upload File( Without Page Refresh) To wwwroot Folder in Using C#.Net , jQuery.


Now for this article first we will create a new asp.net core 6 mvc application and add a controller class file. In controller we will create an httpget action  method.


[HttpGet]

        public IActionResult Index()

        {

            return View();

        }


Now we will build the view, and add the below code into the view.

@{

    ViewData["Title"] = "Home Page";

}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" }))

{

    <span style="font-weight:bold;">Upload File</span>

    <br />

    <span style="color:red;">@ViewBag.Message</span>

    <br />

    <input type="file" name="formFile" />

    <input type="submit" value="Submit" />

    <br />

    <br />

    @if (ViewBag.ImageURL != null)

    {

        <img src="@ViewBag.ImageURL" width="300px" height="200px" />

    }

}


In above code we need to add the added the form tag. In this form tab you must add the  @enctype = "multipart/form-data". Now have look of the input file type control. Here you must remember the name of the control because we are going to user this name in controller to access the detail of the uploaded file. Now we will add the controller httppost code.


[HttpPost]

        public IActionResult Index(IFormFile formFile)

        {

            try 

            {

                string fileName = Path.GetFileName(formFile.FileName);

                string uploadpath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images", fileName);

                var stream = new FileStream(uploadpath, FileMode.Create);

                formFile.CopyToAsync(stream);

                ViewBag.Message = "File uploaded successfully.";

                ViewBag.ImageURL = "images\\" + fileName;

            }

            catch

            {

                ViewBag.Message = "Error while uploading the files.";

            }

            return View();

        }


In above code just check the IFformFile interface, the parameter name is same as the file input control. If this is not same as file input control you will not be able to get the uploaded file at controller end. After successful upload i have stored the file detail in ViewBag and bind it to image control. Here you need to take care one thing, don't pass wwwroot folder in the image path. 


Now run the code and check the output.


Asp.Net Core 6: Upload and Preview Image Using C# In .Net Core (wwwroot)

Now select the file.


selected file


Now here is the selected file. 

selected file

Now here is the file output.

1/21/2022 - By Pranav Singh 0

Thursday, 20 January 2022

Asp.Net Core 6: Add(Create) Dynamic Row With TextBox/TextBoxFor To Table and Get Control Value at Controller End, jQuery, C#.Net

In this article i will show you how you can dynamically add table rows and get the rows value at controller end using c#.net and jQuery.


Other Articles: Asp.net Core 6: Access/Read/Pass TextBox and TextboxFor Value From View To Controller In C#.NetXML File Read(Parse) and Display In Table/Tabular Format in ASP.Net Core 6 / MVC Using C#.NetASP.NET Core 6 : Ajax Upload File( Without Page Refresh) To wwwroot Folder in Using C#.Net , jQuery.


Now for this article we will create a new asp.net core application and add a model class. In this add the below code into your model class. 


  public class TableModel

    {

        public string[] Column1 { get; set; }

        public string[] Column2 { get; set; }

        public string[] Column3 { get; set; }

    }


In above class file code i have added the string array  type value. Now we will go to our controller and add the below code into it. 

@{

    ViewData["Title"] = "Home Page";

}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "formxmldata", @enctype = "multipart/form-data" }))

{

    <div class="form-group col-sm-12">

        <label>

            <input type="button" value="+" />

        </label>

        <table width="100%" class="table table-bordered res table-hover" id="videodetail">

            <thead class="text-uppercase text-center">

                <tr>

                    <th>Video Name</th>

                    <th>Key Points</th>

                    <th>Remarks</th>

                </tr>

            </thead>

            <tbody>

                <tr class="rowcount">

                    <td style="width:32%">@Html.TextBox("Column1[0]", "", new { @class = "form-control form-control-sm temptextcontrolclass" })</td>

                    <td style="width:32%">@Html.TextBox("Column2[0]", "", new { @class = "form-control form-control-sm" })</td>

                    <td style="width:32%">@Html.TextBox("Column13[0]", "", new { @class = "form-control form-control-sm" })</td>

                </tr>

            </tbody>

        </table>

        <input type="submit" value="Submit" />

    </div>

} 


In above code i have added TextBox control and with name having index 0. So when we add the new row using jquery in our table we will make the newly added row control index and per the row number so the next row index will be 1. Now we will write the jquery code  add the code to onclick on the highlighted control.


<script>

        var AddNewRowDetailsVideo = function () {

            var numItems = $('.rowcount').length;

             var row = "<tr class='rowcount'>";

            row = row + "<td><input type='text' name='Column1[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            row = row + "<td><input type='text' name='Column2[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            row = row + "<td><input type='text' name='Column3[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            $('#tabledetail').append(row);

        }

    </script>


In above code i have counted the number of rows and then prepared the html content and append the table control whose id. Here is the complete code. 


@{

    ViewData["Title"] = "Home Page";

}

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "formxmldata", @enctype = "multipart/form-data" }))

{

    <div class="form-group col-sm-12">

        <label>

            <input type="button" value="+" onclick="javascript: AddNewRowDetailsVideo();" />

        </label>

        <table width="100%" class="table table-bordered res table-hover" id="videodetail">

            <thead class="text-uppercase text-center">

                <tr>

                    <th>Video Name</th>

                    <th>Key Points</th>

                    <th>Remarks</th>

                </tr>

            </thead>

            <tbody>

                <tr class="rowcount">

                    <td style="width:32%">@Html.TextBox("Column1[0]", "", new { @class = "form-control form-control-sm temptextcontrolclass" })</td>

                    <td style="width:32%">@Html.TextBox("Column2[0]", "", new { @class = "form-control form-control-sm" })</td>

                    <td style="width:32%">@Html.TextBox("Column3[0]", "", new { @class = "form-control form-control-sm" })</td>

                </tr>

            </tbody>

        </table>

        <input type="submit" value="Submit" />

    </div>

    <script>

        var AddNewRowDetailsVideo = function () {

            var numItems = $('.rowcount').length;

 

            var row = "<tr class='rowcount'>";

            row = row + "<td><input type='text' name='Column1[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            row = row + "<td><input type='text' name='Column2[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            row = row + "<td><input type='text' name='Column3[" + numItems + "]' class = 'form-control form-control-sm' /></td>";

            $('#videodetail').append(row);

        }

    </script>

} 


Now we have done run the code and check the output.

dynamic table in asp.net core

Now add some row by clicking on "+" button.


dynamic table in asp.net core


After adding rows add values on rows control taxtbox click on submit.



Now click on Submit button and check the controller end for received value.


Now display the value.

Note: Here we are receiving data column wise.

1/20/2022 - By Pranav Singh 0

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top