Click here to Skip to main content
15,867,141 members
Home / Discussions / ASP.NET
   

ASP.NET

 
AnswerRe: How to Upgrade Publish website page in latest version at Visual Studio 2012 Pin
Richard Deeming4-Jul-21 21:36
mveRichard Deeming4-Jul-21 21:36 
QuestionHTTPPOST of EditReport not comiting data to database Pin
Carl Cummings (Canada)2-Jul-21 17:34
professionalCarl Cummings (Canada)2-Jul-21 17:34 
AnswerRe: HTTPPOST of EditReport not comiting data to database Pin
Richard Deeming4-Jul-21 21:34
mveRichard Deeming4-Jul-21 21:34 
GeneralRe: HTTPPOST of EditReport not comiting data to database Pin
Carl Cummings (Canada)5-Jul-21 2:02
professionalCarl Cummings (Canada)5-Jul-21 2:02 
QuestionVisual Studio Freezes during build solution Pin
Robymon1-Jul-21 22:37
Robymon1-Jul-21 22:37 
AnswerRe: Visual Studio Freezes during build solution Pin
Richard Deeming1-Jul-21 23:15
mveRichard Deeming1-Jul-21 23:15 
AnswerRe: Visual Studio Freezes during build solution Pin
Deepak Vasudevan13-Sep-21 21:49
Deepak Vasudevan13-Sep-21 21:49 
QuestionASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content Pin
SeeSharp223-Jun-21 9:58
SeeSharp223-Jun-21 9:58 
How do you get dynamically loaded tabs to work in ASP.Net Core MVC?

1. I have a simple Index.cshtml that uses bootstrap tabs to create two tabs from the a tags on the page. (To test out options, I first copied from https://qawithexperts.com/article/asp.net/bootstrap-tabs-with-dynamic-content-loading-in-aspnet-mvc/176)
2. There is a click event on each tab that uses $.ajax() to call the controller and then set the html of the appropriate div.
3. I have a model with one field, a string that is required.
4. I have the create view that Visual Studio created.
5. When I run it and click the first tab, the controller returns PartialView("FirstTabCreate") and loads into the div and everything looks great.
6. The problem is when clicking the "Create" button.
7. The controller method checks if IsValid on the ModelState. If not, here is where I run into a problem. If I return the partial view and the model that was passed in I see my validation errors as expected but because I returned the partial view, I lose my tabs. If I return the main view (Index) then the javascript reloads my partial view and has lost the ModelState at that point.
I am not sure what to return so that this works. I have seen lots of examples online that use dynamically loaded tabs but none of them have models or validation.


Code below: Index Page
@model FirstTab
<!-- Tab Buttons -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active">
        <a href="#FirstTab" role="tab" data-toggle="tab">Submission</a>
    </li>
    <li>
        <a href="#SecondTab" role="tab" data-toggle="tab">Search</a>
    </li>
</ul>

<!-- Tab Content Containers -->
<div class="tab-content">
    <div class="tab-pane active" id="FirstTab">
       
    </div>
    <div class="tab-pane fade" id="SecondTab">

    </div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault();
        var tabID = $(this).attr("href").substr(1);
        $(".tab-pane").each(function () {
            console.log("clearing " + $(this).attr("id") + " tab");
            $(this).empty();
        });

        $.ajax({
            url: "/@ViewContext.RouteData.Values["controller"]/" + tabID,
            cache: false,
            type: "get",
            dataType: "html",
            success: function (result) {
                $("#" + tabID).html(result);
            }

        });
        $(this).tab('show');
    });

    $(document).ready(function () {
        $('#tabstrip a')[0].click();
    });
</script>


FirstTabCreate View

@model WebApplication1.Models.FirstTab

<h4>FirstTab</h4>
<hr />
<div class="row">
    <div class="col-md-4">
       <form asp-action="FirstTabCreate">        
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>


Model

using System.ComponentModel.DataAnnotations;

namespace WebApplication1.Models
{
    public class FirstTab
    {
        [Required()]
        public string FirstName { get; set; }
    }
}


Controller

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System.Diagnostics;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {       
        public IActionResult Index()
        {
            return View();
        }

        public ActionResult FirstTab()
        {
            return PartialView("FirstTabCreate");
        }

        public ActionResult FirstTabCreate(FirstTab model)
        {
            if (!ModelState.IsValid)
            {
                return View("FirstTabCreate",  model);
            }
            return Content("Success");
        }

        public ActionResult SecondTab()
        {
            return PartialView("_SecondTab");
        }
    }
}

AnswerRe: ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content Pin
Richard Deeming23-Jun-21 21:39
mveRichard Deeming23-Jun-21 21:39 
GeneralRe: ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content Pin
SeeSharp224-Jun-21 2:21
SeeSharp224-Jun-21 2:21 
GeneralRe: ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content Pin
Richard Deeming24-Jun-21 3:54
mveRichard Deeming24-Jun-21 3:54 
GeneralRe: ASP.Net Core MVC - Validation Summary not working with bootstrap tabs and dynamically loaded content Pin
SeeSharp224-Jun-21 4:16
SeeSharp224-Jun-21 4:16 
QuestionCrystal Report Issue in ASP.Net 2010. Pin
Mohammad Salmani8-Jun-21 20:43
Mohammad Salmani8-Jun-21 20:43 
AnswerRe: Crystal Report Issue in ASP.Net 2010. Pin
Richard Deeming8-Jun-21 21:31
mveRichard Deeming8-Jun-21 21:31 
GeneralRe: Crystal Report Issue in ASP.Net 2010. Pin
Mohammad Salmani8-Jun-21 22:36
Mohammad Salmani8-Jun-21 22:36 
GeneralRe: Crystal Report Issue in ASP.Net 2010. Pin
Richard Deeming8-Jun-21 22:51
mveRichard Deeming8-Jun-21 22:51 
GeneralRe: Crystal Report Issue in ASP.Net 2010. Pin
Mohammad Salmani10-Jun-21 4:11
Mohammad Salmani10-Jun-21 4:11 
QuestionOutputCacheProvider... Pin
Kornfeld Eliyahu Peter19-May-21 22:29
professionalKornfeld Eliyahu Peter19-May-21 22:29 
Questionaspnet credentials from web.config Pin
philippegent8-May-21 2:14
philippegent8-May-21 2:14 
AnswerRe: aspnet credentials from web.config Pin
Dave Kreskowiak8-May-21 4:58
mveDave Kreskowiak8-May-21 4:58 
AnswerRe: aspnet credentials from web.config Pin
Richard Deeming18-May-21 3:56
mveRichard Deeming18-May-21 3:56 
QuestionStore Dataset into session variable Pin
Member 1189497423-Apr-21 23:59
Member 1189497423-Apr-21 23:59 
GeneralRe: Store Dataset into session variable Pin
Richard MacCutchan24-Apr-21 2:25
mveRichard MacCutchan24-Apr-21 2:25 
GeneralRe: Store Dataset into session variable Pin
Deepak Vasudevan13-Sep-21 21:45
Deepak Vasudevan13-Sep-21 21:45 
AnswerRe: Store Dataset into session variable Pin
C0ding_j3ff28-Apr-21 12:02
C0ding_j3ff28-Apr-21 12:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.