MVC.net 4 - 部分视图:使用文本输入重新发布自我

时间:2014-03-26 23:05:11

标签: asp.net-mvc-4 partial-views

我使用局部视图来显示图表。我在局部视图中添加了一些输入控件,以便可以重新生成图表。

我有部分工作。但是,在原始的部分视图中没有生成图表,它只是打开另一个视图。

部分视图:

@model DataCatalogV2.Models.DC.ImageModel
<img id="imgWSChart" src="data:image/png;base64,@System.Convert.ToBase64String(Model.image)" alt="Workspace Chart" /> 

@using (Html.BeginForm("QA_ChartRePost","Chart",FormMethod.Post, new { id = "Chart_Request" }))
{
    <table>
        <tr>
            <td>
                <button>Reset</button>
            </td>
             <td>
                <label>Start Range:</label>
            </td>
             <td>
                <input id='QAstartRange' value='@DataCatalogV2.Controllers.ChartController.dtSeriesStartDate' style='width: 185px;' />
            </td>
              <td>
                <label>End Range:</label>
            </td>
            <td>
                <input id='QAendRange' value='@DataCatalogV2.Controllers.ChartController.dtSeriesEndDate' style='width: 185px;' />
            </td>
            <td>
                <button>Plot Range</button>

            </td>
        </tr>
    </table>
}

控制器:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult QA_ChartRePost(String Measurement, String Type, String Name, String Units, String StartDate, String EndDate, String HideQAFail, String Token)
    {
        DataCatalogV2.Models.DC.ImageModel item = new Models.DC.ImageModel();
        dtStartDate = Convert.ToDateTime(StartDate);
        dtEndDate = Convert.ToDateTime(EndDate);


        EyascoDBController EC = new EyascoDBController();
        if (EC.HasAccess(AppName))
        {
            //Dummy Vars
            item.image = MRMChart("1002.500.131.1.1", "500 - USBR - Temperature 1", "Degrees C", "5/30/2002 21:50", "5/13/2013 23:50", "true", "NONE1395870778280");
            //item.image = MRMChart(Measurement, Name, Units, StartDate, EndDate, HideQAFail, Token);
        }
        //return View(item);
        return PartialView("QA_Chart", item);
    }

JS - 对部分视图的原始调用

function popupChartQA(Measurement, Type, Name, Units, StartDate, EndDate, HideQAFail) {
var url;
Name = encodeURIComponent(Name);
Measurement = encodeURIComponent(Measurement);
var token = "NONE" + new Date().getTime(); //unique Token to force chart re-generation
url = baseUrl + "/Chart/QA_Chart?Measurement=" + Measurement + "&Type=" + Type + "&Name=" + Name + "&Units=" + Units + "&StartDate=" + StartDate + "&EndDate=" + EndDate + "&HideQAFail=" + HideQAFail + "&Token=" + encodeURIComponent(token);
showWaiting("Chart - QA");


$.ajax({
    type: "GET",
    url: url,
    dataType: "html",
    success: function (data) {
        //alert( " Token:" + Token + "data: " + data);
        $("#chartDiv").html(data);
    }            });

2个问题:

  1. 如何在原始请求部分视图上重新生成图表?

  2. 如果我的模型(图片)没有公开此属性,如何将新图表参数传递回控制器(定义字典?)。

2 个答案:

答案 0 :(得分:0)

我能够部分地通过将部分视图作为(完整)视图来解决此问题。

现在我只需要将模型对象传递给View ??? (我是否使用表单提交?)

 @using (Html.BeginForm("QA_ChartRePost", "Chart", FormMethod.Get ,new { id = "Chart_Request" }))

新视图

@model DataCatalogV2.Models.DC.WSIMG
@{
ViewBag.Title = "ControlChart";
ViewBag.BaseURL = DataCatalogV2.Controllers.HomeController.GetBaseUrl();
}

<script type="text/javascript">
var di = grid.dataItem(grid.select());

$(document).ready(function () {
    $("#QAstartdate").kendoDateTimePicker({
        //value: new Date(2014, 1, 1)
    });
    $("#QAstartRange").kendoDateTimePicker({
        value: new Date(2013, 1, 1)
    });
    $("#QAendRange").kendoDateTimePicker({
        value: new Date()
    });
});
</script>

<h2>ControlChart</h2>

<div id="ChartConrols"/>
<div dir="ltr" style="background-color: tan; display:inline-block; azimuth:left-side; float:left">
 <img id="imgWSChart" src="data:image/png;base64,@System.Convert.ToBase64String(Model.myIM.image)" alt="Workspace Chart" />


<div>
@using (Html.BeginForm("QA_ChartRePost", "Chart", FormMethod.Get ,new { id = "Chart_Request" }))
{
       <table>
        <tr>
            <td>
                <button>Reset</button>
            </td>
             <td>
                <label>Start Range:</label>
            </td>
             <td>
                <input id='QAstartRange' value='@DataCatalogV2.Controllers.ChartController.dtSeriesStartDate' style='width: 185px;' />
            </td>
              <td>
                <label>End Range:</label>
            </td>
            <td>
                <input id='QAendRange' value='@DataCatalogV2.Controllers.ChartController.dtSeriesEndDate' style='width: 185px;' />
            </td>
            <td>
                <button>Plot Range</button>

            </td>
        </tr>
    </table>
}

</div>
</div>

并编译我需要的两个模型(图像模型工作系列模型到一个模型) 新模式

    public class WSIMG
{
    public ImageModel myIM { get; set;}
    public WorkingSeries myWS { get; set;}
}

public class WorkingSeries
{
    [Key]
    public Int32 id { get; set; }
    public String Type { get; set; }
    public String Name { get; set; }
    public String Lookup { get; set; }
    public String Units { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public Boolean HideQAFail { get; set; }
    public Boolean MultiChart { get; set; }
}
 public class ImageModel
{
    public byte[] image { get; set; }
}

新的控制器操作

 [HttpGet]
    //public ActionResult QA_ChartRePost(String Measurement, String Type, String Name, String Units, String StartDate, String EndDate, String HideQAFail, String Token)
    public ActionResult QA_ChartRePost(WSIMG WSIMGmodel)
    {
        //ImageModel item = WSIMGmodel.myIM;

        EyascoDBController EC = new EyascoDBController();
        if (EC.HasAccess(AppName))
        {
        WSIMGmodel.myIM.image = MRMChart(WSIMGmodel.myWS.Lookup, WSIMGmodel.myWS.Name, WSIMGmodel.myWS.Units, WSIMGmodel.myWS.StartDate.ToString(), WSIMGmodel.myWS.EndDate.ToString(), WSIMGmodel.myWS.HideQAFail.ToString(), "NONE1395870778280");
        }
        return PartialView("ControlChart", WSIMGmodel); 

    }

答案 1 :(得分:0)

尝试删除对象new {id ="Chart_Request"}而不是GET放置FormMethod.Post