MVC 3在JavaScript中从视图调用Action方法

我是MVC新手，遇到了一个问题。我有一个视图，允许用户选择一个项目，然后单击一个按钮来查看关于该项目的报告。报告也是一个MVC视图，期望它的模型被初始化。有一个控制器动作方法来初始化模型并调用报告视图。

所以我的视图需要调用初始化模型的报告控制器并调用报告视图。对报表控制器的调用必须由JavaScript函数进行。

最后，我想要报告出现在一个新的窗口中，而保留原来的视图。

我可以直接使用窗口调用报告视图。打开，但是这会跳过报告初始化器，并且当它试图访问模型时，报告视图会崩溃。

有一种方法来调用一个控制器使用window.open?如果模型为空，我可以从报告视图调用报告控制器吗?我可以在第一个视图中从JavaScript函数调用报告控制器吗?

或者你建议我怎么处理这个?谢谢你的帮助!

URW

下面是伪代码:

下面是我正在处理的视图的代码。这是一个搜索表单。用户可以输入一些值(或不输入)并单击表单顶部的search。表单将重新显示，以在搜索表单下方显示搜索结果。在找到的项目列表下面是两个按钮:一个用于调用ShowReport函数一个被称为巫师的人。这两个按钮在不同的表单上，因为它们都需要提交。至少我现在是这么看的。如果有两个表单是一个问题，我可以改变它。

// This is the function that should call the controller to show the report
function ShowReport() 
{
    if (ReportID != null && ReportID > 0) 
    {     
      // I need to call report controller passing ReportID
    }
    else 
    { 
      alert("The Report ID is not valid. Please select a different itemand try again.");
      return; 
    }
}

当用户通过单击行开头的单选按钮在列表中选择一个项目时，该函数存储reporttid。它还根据所选项目启用或禁用ShowReport和Run Wizard按钮。该报表并非对列表中的所有项目都可用，因此该函数检查当前选择是否有报表可用，如果有报表可用，则启用SHOW report按钮。

function activateStart(annualWaterReportId) {
    // store the ReportID for this ID in a global 
    // in case the user wants to see the Full report
    ReportID = reportId;
    document.getElementById("startButton").disabled = false;
    if (ReportId > 0) {
        document.getElementById("viewReport").disabled = false;
    } else {
        document.getElementById("viewReport").disabled = true;
    }
}

当用户选择一个项目并单击RunWizard按钮时，此功能将启动报告向导。

function startAction() {
var elements = document.getElementsByName("Select");
    var id = null;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
            id = elements[i].value;
            break;
        }
    }
    if (id != null) {
        document.getElementById("IDList").value = id;
        document.forms["runWizard"].submit();
    }
    else {
        alert("You must first select an item before pressing the Start Wizard button. " );
    }
}

下面的表单显示3个字段，当用户输入/选择某些内容并单击搜索字段下面的搜索时，这些字段将成为搜索参数。

@using ((Html.BeginForm("Index", "Search", FormMethod.Post, new { onsubmit = "showLoadMask('Searching...')" })))
{
<table class="searchTable">
    <tr>
        <td>
            <div>
                Name:</div>
            <input name="searchName" type="text" value="@ViewBag.searchName" />
        </td>
        <td>
            <div>
                ID Number:</div>
            <input name="searchID" type="text" value="@ViewBag.searchID"/>
        </td>
        <td>
            <div>
                Year:</div>
            <input name="searchYear" type="text" value="@ViewBag.searchYear"/>
        </td>
</tr>
    <tr>
        <td colspan="4">
            <input type="submit" class="smallButton" value="search" />
        </td>
    </tr>
</table>

}

接下来是用户单击上面的Search时找到的项目列表。每行之前都有一个单选按钮，用户可以在单击列表下面的两个按钮之一之前选择一行。

<table style="width: 100%" id="searchResults">
<thead>
    <tr>
        <th>
            Select Person
        </th>
        <th>
            Name
        </th>
        <th>
            City
        </th>
        <th>
            State
        </th>
        <th>
            Zip Code
        </th>
    </tr>
</thead>
<tbody>
@foreach (var searchVM in Model)
        {
            <tr>
                <td>
                    <input type="radio" name="Select" value="@searchVM.Number" onclick="activateStart(@searchVM.YearID) " />
                </td>
                <td>@searchVM.Number
                </td>
                <td>@searchVM.Name
                <td>@searchVM.City
                </td>
                <td>@searchVM.StateID
                </td>
                <td>@searchVM.PostalCode
                </td>
            </tr>
        }
</tbody>

在搜索结果下面是两个关键按钮:一个显示向导，一个显示报告。此表单的存在只是为了允许用户在选择上面列表中的项目后访问向导。

<form id="runWizard" method="post" action="@ViewBag.wizardAction">
<input type="button" value="Start Wizard disabled id="startButton" onclick="startAction()" />
<input type="hidden" name="pageAction" id="pageAction" value="NEXT_ACTION" />
<input type="hidden" name="currentPage" value="3" />

我添加了这个表单用于"查看报告"按钮，所以我可以更好地控制发生什么，当按钮被点击。

@using (Html.BeginForm("CallFullReport", "Search", FormMethod.Post, new Dictionary<string, object>{"ReportID", }))
{
// Clicking this button should bring up the report in a new window, while leaving the current window as is.
<input type="submit" value="View Full Report" disabled id="viewReport" onclick="showReport()" />
<input type="hidden" id="ReportID" name="ReportID" value="-1"/>
}

我要调用的控制器在一个单独的dll中，源代码在一个名为homeconcontroller .cs的文件中，控制器看起来像这样:

public ActionResult FullReport(int reportID) {
        ReportModel reportModel = null;
        try {
            reportModel = _db.Reports.Find(reportID);
        }
        catch (Exception) {
                // gen up an error message
        }
        return View(reportModel);
    }

最后是控制器调用的视图。它使用reportModel中的数据显示一个报告我把代码减到最少，这样我就可以展示一些东西了有道理。

<table style="width: 100%">
foreach (Var item in ReportModel)
{
 <tr>
     <td class="tableLabel base">Name: </td>
     <td class="tableData base">@Item.Name</td>
 </tr>
 <tr>
     <td class="lineSpacer">&nbsp;</td></tr>
 <tr>
     <td class="tableLabel base">Address: </td>
     <td class="tableData base">@Item.Street1</td>
 </tr>
 @if (Item.Street2 != null && Item.Street2 != "") 
 {
  <tr>
    <td>&nbsp;</td>
    <td>@Item.Street2</td>
  </tr>
  }
  <tr>
     td>&nbsp;</td>
     <td>@Item.City, @Item.StateID @Item.PostalCode</td>
  </tr>
  <tr><td>&nbsp;</td></tr>
  <tr><td class="tableLabel base">Phones:</td><td class="tableData base">@(new HtmlString(phones))</td></tr>
  <tr><td class="tableLabel base">Email:</td><td class="tableData base"><a href="mailto:@Item.Email">@Item.Email</a></td></tr>
}
</table>

这是我所有的伪代码。我继承了所有这些代码，我是新的MVC和一切都与它。如果我能提供更多的信息，请告诉我。

谢谢束

$(document).ready(function () { 
    $('#loadReport').on('click', function (){
        $.post(url, { ReportId: reportId },  function (data) {
            var win=window.open('about:blank');
            with(win.document)
            {
                open();
                write(data);
                close();
            }
        });
    });
});