Ajax调用Action无响应，跨控制器调用Action视图未渲染求助

Hey there! Let's break down why your Ajax call isn't rendering the target view properly and how to fix it.

The Core Problem #

When you use Ajax to call an action, the server returns the view's HTML content, but Ajax doesn't automatically render this content on the page—you have to explicitly handle the response and insert it into your DOM. Plus, if your Action is returning a full View() instead of a partial view, you'll get the entire layout (including <html>, <head> tags) which will mess up your existing page structure.

Step 1: Adjust Controller B's Action #

First, make sure your Action returns a partial view (without the layout) instead of a full view. This keeps the response clean and ready to insert into your current page.

public ActionResult YourTargetAction(int empId, DateTime selectedDate)
{
    // Process your parameters and fetch the required data
    var viewModel = YourDataService.GetRelevantData(empId, selectedDate);
    
    // Return a partial view (no layout included)
    return PartialView("_YourPartialViewName", viewModel);
}

Note: Replace _YourPartialViewName with the actual name of your partial view file, and make sure it doesn't reference a layout explicitly.

Step 2: Complete Your Frontend Ajax Code #

Your current code captures the date and employee ID, but it's missing the actual Ajax request and response handling. Here's how to fill that in:

if(isAtt){
    var selectedDate = $('#calendar').fullCalendar('getDate');
    alert("The current date of the calendar is " + selectedDate.format());
    var empId = @Session["currentEmpID"].ToString();

    // Initiate the Ajax call
    $.ajax({
        url: '/ControllerB/YourTargetAction', // Replace with your actual Action path
        type: 'GET', // Use POST if your Action is decorated with [HttpPost]
        data: {
            empId: empId,
            selectedDate: selectedDate.format('YYYY-MM-DD') // Ensure date is in a format MVC can parse
        },
        dataType: 'html', // Tell jQuery we expect HTML in response
        success: function(responseHtml) {
            // Insert the returned partial view HTML into a container on your page
            $('#viewRenderTarget').html(responseHtml);
        },
        error: function(xhr, status, error) {
            console.error('Ajax request failed:', error);
            // Optional: Show an error message to the user
        }
    });
}

Step 3: Add a Target Container in Your View #

In your Controller A's Index.cshtml, add a container where the rendered partial view will go:

<!-- This is where the partial view from Controller B will be inserted -->
<div id="viewRenderTarget"></div>

Troubleshooting Tips #

• Check Parameter Handling: Set a breakpoint in Controller B's Action to confirm empId and selectedDate are being received correctly.
• Inspect Network Requests: Open your browser's DevTools (F12) → Network tab. Look for the Ajax request:
  • Ensure the status code is 200 (success).
  • Check the Response tab to see if it's returning the expected partial view HTML (not a full page with layout).
• Avoid Full View Returns: If you accidentally return View() instead of PartialView(), the response will include your site's layout, which will break your page's HTML structure when inserted.

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