asp.net-corevalidationmodel-view-controllerformwizardserver-side-validation

Returning html ID via path of Views of MVC controller


I am using wizard in my page and server side validation using razor view. output page Index.cshtml

For validation in #step-3/#step-2 wizard i want my page goes to id->step-3 but it goes to #step-1 or at the start of wizard page

I have to return the id of html page in returning views of controller.controller.cshtml


Solution

  • You can try to use Tempdata and js,here is a demo:

    action:

    [HttpPost]
            public IActionResult Index(Contact contData)
            {
                TempData["id"] = "step-3";
                return View();
            }
    

    View:

    <div class="tab-content">
        <div id="step-1" class="tab-pane fade">
            <h3>Step 1</h3>
            <p>Some content in step 1.</p>
        </div>
        <div id="step-2" class="tab-pane fade">
            <h3>Step 2</h3>
            <p>Some content in step 2.</p>
        </div>
        <div id="step-3" class="tab-pane fade">
            <h3>Step 3</h3>
            <p>Some content in step 3.</p>
        </div>
    </div>
    
    <form method="post">
        <button>submit</button>
    </form>
    @section Scripts{
        <script>
            $(function () {
                var s = "@TempData["id"]";
                var indexValue=0;
                $(".tab-pane").each(function (index) {
                    if ($(this).attr("id") == s) {
                        $(this).addClass("in active");
                        indexValue=index;
                    } else {
                        $(this).removeClass("in active");
                    }
                })
                $(".myClass").each(function (index) {
                    if (indexValue==index) {
                        $(this).addClass("active");
                        indexValue=index;
                    } else {
                        $(this).removeClass("active");
                    }
                })
            })
        </script>
        
    }
    

    result:

    enter image description here