Search code examples
asp.net-core-mvcviewmodelprogress

How to update value progress bar bootstrap from controller in ASP .NET Core


I have a table that receive email of my users for newsletter .I Show it on my dashboard with count .but now I want to show on progress bar and its percentage per last month how do I do ? I create another view model for show count of some things I can show count of them but I need show on progress bar too.

my viewmodel:

       public class NewsLetterViewModel
            {
           
                public string Phone { get; set; }
        
           
                public string Email { get; set; }
         
                public DateTime CreateDate { get; set; }
            }

Solution

  • You can try to use ViewBag to pass count and percentage.Here is a demo:

    Action:

    public IActionResult News()
        {
            ViewBag.Count = 0;
            ViewBag.Percentage = 0;
            return View();
        }
        [HttpPost]
        public IActionResult News(NewsLetterViewModel n,int Count)
        {
            //you can pass the count and percentage with ViewBag here
            ViewBag.Count= Count+ 1;
            ViewBag.Percentage=25;
            return View();
        }
    

    View:

     <div>
        Count:@ViewBag.Count
    </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: @ViewBag.Percentage%;" aria-valuenow="@ViewBag.Percentage" aria-valuemin="0" aria-valuemax="100">@ViewBag.Percentage%</div>
        </div>
    <form  method="post">
        <input hidden name="Count" value="@ViewBag.Count" />
        <div class="form-group">
            <label asp-for="Phone" class="control-label"></label>
            <input asp-for="Phone" class="form-control" />
            <span asp-validation-for="Phone" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Email" class="control-label"></label>
            <input asp-for="Email" class="form-control" />
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="CreateDate" class="control-label"></label>
            <input asp-for="CreateDate" class="form-control" />
            <span asp-validation-for="CreateDate" class="text-danger"></span>
        </div>
        <input type="submit"value="submit" />
    </form>
    

    result: enter image description here