咨询如何针对特定表单执行jQuery提交函数及导航标签页视图问题

Hey there! Let's tackle your two needs here—first confirming your tab structure is set up correctly, then walking through how to target specific forms with jQuery for submission.

1. Quick Check on Your Tab Partial View Setup #

Your current approach using Html.RenderAction to load partial views into tab panes is solid—it keeps your main index.cshtml clean and separates each tab's logic. A small tip to improve readability: instead of relying on ViewData for tab IDs, consider using hardcoded strings (or backend constants) to avoid typos, like this:

<div class="tab-content" id="mainTab">
    <div class="tab-pane fade in active" id="stempel-tab" role="tabpanel" aria-labelledby="stempel-tab">
        @{ ViewBag.Title = "Index"; }
        @{ Html.RenderAction("_Stempel", "Home"); }
    </div>
    <div class="tab-pane fade" id="backdated-tab" role="tabpanel" aria-labelledby="backdated-tab">
        @{ Html.RenderAction("_BackDated", "Home"); }
    </div>
    <!-- Add your other two tabs here -->
</div>

This makes it easier to reference tabs in your jQuery later, without worrying about ViewData mismatches.

2. Targeting Specific Forms with jQuery Submission #

There are a few flexible ways to submit a specific form depending on your setup. Here are the most common scenarios:

Option 1: Target by Form ID (Most Reliable) #

First, add a unique id to the form in your partial view (e.g., _Stempel.cshtml):

<form id="stempel-form" action="@Url.Action("SubmitStempel", "Home")" method="post">
    <!-- Your form fields here -->
    <button type="submit">Submit</button>
</form>

Then use jQuery to listen for the submit event, override the default page refresh, and handle submission via AJAX (recommended for smooth single-page behavior):

// Wait for the DOM to fully load before attaching listeners
$(document).ready(function() {
    // Listen for submission on the specific form
    $('#stempel-form').on('submit', function(e) {
        // Prevent default form submission (avoids page reload)
        e.preventDefault();

        // Serialize form data into a URL-encoded string
        var formData = $(this).serialize();
        
        // Send AJAX request to your backend action
        $.ajax({
            url: $(this).attr('action'), // Use the form's defined action URL
            type: $(this).attr('method'), // Use the form's defined HTTP method (GET/POST)
            data: formData,
            success: function(response) {
                // Handle successful submission (e.g., show feedback, refresh content)
                alert('Stempel form submitted successfully!');
                // Optional: Refresh the tab's partial view to show updated data
                $('#stempel-tab').load('@Url.Action("_Stempel", "Home")');
            },
            error: function(xhr, status, error) {
                // Handle errors (e.g., log details, notify the user)
                console.error('Submission failed:', error);
                alert('Oops, something went wrong. Please try again.');
            }
        });
    });
});

Option 2: Target by Tab Pane (If No Form ID) #

If you don't want to add an ID to the form, you can target it by its parent tab pane:

$(document).ready(function() {
    // Target the form inside the "stempel-tab" panel
    $('#stempel-tab form').on('submit', function(e) {
        e.preventDefault();
        // Same AJAX logic as Option 1
    });
});

Option 3: Manual Trigger via Button Click #

If you want to submit the form using a custom button (not the form's default submit button), you can trigger the submission manually:

<!-- Add this button anywhere (inside or outside the form) -->
<button id="manual-stempel-submit">Submit Stempel Form</button>

$(document).ready(function() {
    $('#manual-stempel-submit').on('click', function() {
        // Trigger the form's submit event (fires the earlier listener)
        $('#stempel-form').trigger('submit');
        
        // Or skip the listener and run AJAX directly:
        /*
        var form = $('#stempel-form');
        var formData = form.serialize();
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: formData,
            // Success/error handlers as before
        });
        */
    });
});

Important Notes #

• Dynamic Partial Views: If your partial views load dynamically (e.g., when a tab is first clicked), use event delegation to ensure the listener works for newly added elements:

  // Attach the listener to a parent element that exists on page load
  $('#mainTab').on('submit', '#stempel-form', function(e) {
      e.preventDefault();
      // AJAX logic here
  });
  

• jQuery Load Order: Make sure jQuery is loaded before your custom script (add it in the <head> or right before </body>).

内容的提问来源于stack exchange，提问作者Johanna Gonzalez