2013-08-12 3 views
0

Я пробовал разные способы, играл с javascript и ajax. Пожалуйста, помогите, если вы столкнулись с этой ситуацией дооткрыть всплывающее окно с частичного просмотра и перезагрузить родительский частичный вид

У меня есть мнение hfnlp.cshtml

@model IMONLP.Models.HFADMwrap 
@using ADM 
@{ 
    ViewBag.Title = "HFNLP"; 
} 
<html> 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<body> 


**<div id="popup"> 
    @if (true) 
    { 
     Html.RenderPartial("popup", Model); 
    } 
</div>** 

<div id="Quadrant"> 
     @if (@Model.flag == 1) 
     { 
      Html.RenderPartial("grid", Model); 
     } 
    </div> 


</body> 
</html> 

У меня есть эта popup.cshtml, которая является частичным видом выше точки зрения. Появится поп, который откроется и получит контент от пользователя. Он должен делать все это. 1. Получите содержимое, напишите его в модель 2. закройте всплывающее окно 3. верните элемент управления родительскому объекту, и родительский элемент не должен перезагружать, я в порядке, если popup.cshtml (частичный просмотр) - [часть родительского winodw перезагружает].

Вот popup.cshtml

@model IMONLP.Models.HFADMwrap 

@{ 
    ViewBag.Title = "popup"; 
} 
<html> 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script type="text/javascript"> 

    //pop up window 
    $(function() { 
     $('#ClickMe').click(function() { 
      window.open('@Url.Action("FileUpload", "HFNLP")', 'FileUpload', 'height=' + (window.screen.height - 100) + ',width=700,left=' + (window.screen.width - 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes'); 
     }); 
    }); 
</script> 

<body> 

    <input type="button" id="ClickMe" name="ClickMe" value="New Visit"/> 

</body> 

</html> 

При нажатии на кнопку должна открыть всплывающее окно


Наконец, fileupload.cshtml который является всплывающее окно то будет вызываться при нажатии на кнопку

@model IMONLP.Models.HFADMwrap 
@using ADM 
@{ 
    ViewBag.Title = "FileUpload"; 
} 

<html> 
<script src="~/Scripts/jquery-1.8.2.min.js"></script> 


<script type="text/javascript"> 
    $(function() { 
     $('#ClickMe').click(function() { 

      //window.opener.location.href = '@Url.Action("AfterUpload", "HFNLP", new { [email protected]})';*@ 
      window.opener.location.href = window.opener.location.href; 
      window.close(); 
     }); 
    }); 
</script> 
<body> 

    <br /> 
    @using (Html.BeginForm("AfterUpload", "HFNLP")) 
    { 

          <input type="button" value="submit & View Codes" style="position: absolute; left: auto; width: auto;" id="ClickMe" name = "ClickMe"/> 
          @*<input type="hidden" name="a" value="@Model.Hfnlp.unstructured_text"/>*@ 


          @if (!string.IsNullOrEmpty(Model.Hfnlp.unstructured_text)) 
          { 
          @Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { name= "textBox1", @value = Model.Hfnlp.unstructured_text, style = "width: 650px; height: 400px;"}) 
          } 
          else 
          { 
          @Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { style = "width: 650px; height: 400px;" }) 
          } 


    }  
     @using (Html.BeginForm("FileUploadw", "hfNLP", FormMethod.Post, new { enctype = "multipart/form-data" })) 
     { 

      <input type="file" name="file" id="file" /><br /> 
      <input type="submit" value="Upload" name="submit" />   
     } 

</body> 
</html> 

С помощью настоящего кода я могу получить всплывающее окно и вызвать действие o f контроллер и закрыть всплывающее окно. Затем перезагружается вся родительская страница. Я теряю данные, которые передаются модели. Пожалуйста, помогите мне в этом.

** * ** * ** * **EDIT* ** * ** * ** * *

public ActionResult FileUpload(HFADMwrap wrap) 
     { 
      HFNLP hf = new HFNLP(); 
      wrap.Hfnlp = hf; 
      return View("FileUpload", wrap); 
     } 

     public ActionResult FileUploadw(HFADMwrap wrap, HttpPostedFileBase file) 
     { 
      HFNLP hf = new HFNLP(); 
      if (wrap.Hfnlp == null) 
      { 
       wrap.Hfnlp = hf; 
      } 
      file = Request.Files[0]; 
      BinaryReader b = new BinaryReader(file.InputStream); 
      byte[] binData = b.ReadBytes(file.InputStream.Length.ToInt32()); 
      string filecontent = System.Text.Encoding.UTF8.GetString(binData); 
      hf.unstructured_text = filecontent; 
      /*upload and get the file content */ 

      if (wrap.Hfnlp.unstructured_text == null) 
      { 
       return RedirectToActionPermanent("FileUpload", "FileUpload"); 
      } 
      wrap.Hfnlp = hf; 
      return PartialView("FileUpload", wrap); 
     } 

Я попытался это сейчас

<div id="popup"> 
<input type="button" value="something" onClick="?(What should be here)"/></div> 
+0

Прежде всего - RenderPartial просто отображает вид бритвы внутри родительского вида, поэтому вам действительно нужно пропустить теги * html * и * body *. - Кроме того, я не совсем уверен, что вы имеете в виду со всплывающими окнами, хотите ли вы создавать такие диалоги (http://jqueryui.com/dialog/)? – peter

ответ

0

Я использую диалог щ JQuery для работы, как это. Нет причин для загрузки частичного права на представление.

В моем * .cshtml у меня есть DIV, который в конечном итоге станет моим диалог

<div id="delegateDialog" class="actionDialog"></div> 

Затем, когда определенная кнопка нажата, этот метод будет называться, чтобы загрузить диалог:

var loadDelegateDialog = function(processInstanceID, serialNumber) { 
    var $dialog = $('#delegateDialog'); 
    var title = "Delegate Workflow #" + processInstanceID; 
    var actionUrl = '@Url.ActionFor((TaskListController c) => c.GetDelegateDialog(Model.TaskListID, null, null))'; 

      $.ajax({ 
       url: actionUrl, 
       type: 'POST', 
       data: { 
        processInstanceID: processInstanceID, 
        serialNumber: serialNumber 
       }, 
       dataType: 'html', 
       success: function(data) { 
        $dialog.html(data); 

        $dialog.dialog({ 
         autoOpen: true, 
         closeOnEscape: false, 
         modal: true, 
         resizable: false, 
         draggable: false, 
         dialogClass: "no-close", 
         maxHeight: 600, 
         width: 500, 
         position: { my: "top", at: "top+20", of: window }, 
         hide: { effect: "fade", duration: 250 }, 
         show: { effect: "fade", duration: 250 }, 
         title: title, 
         close: function() { 
          // call a method to reload your parent page via ajax 
         } 
        }); 
       }, 
       error: function(jqXhr, textStatus, errorThrown) { 
        $.notifyBar({ 
         html: jqXhr.responseText, 
         cls: 'error', 
         delay: 10000 
        }); 
       } 
      }); 
     }; 

Метод loadDelegateDialog js вызывает вызов моего контроллера в GetDelegateDialog, который возвращает частичный вид. Содержимое затем помещается в диалоговое окно.

Вот метод управления:

[HttpPost] 
public PartialViewResult GetDelegateDialog(int id, int? processInstanceID, string serialNumber) 
{ 
    var taskListID = id; 

    if (!processInstanceID.HasValue) 
    { 
     throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingProcessIntanceID); 
    } 

    if (string.IsNullOrWhiteSpace(serialNumber)) 
    { 
     throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingSerialNumber); 
    } 

    var model = this.taskListService.BuildDelegateDialogViewModel(taskListID, processInstanceID.Value, serialNumber); 

    return this.PartialView("_DelegateDialog", model); 
} 

Есть близко метода, Диалог им сделать вызов к другому методу Js, который может либо обновить/перезагрузить страницу, или, если вы не хотите полную перезагрузку , сделайте вызов AJAX, чтобы получить нужные данные и заполнить соответствующие разделы вашей страницы.

+0

Спасибо за ответ. Этот ответ кажется альтернативой тому, что я пытаюсь сделать. Проверьте мое Редактирование, в котором я включил код контроллера. Мне может понадобиться другое представление в диалоговом окне, не могли бы вы дать мне более подходящий код в соответствии с моим контроллером – RJ24

Смежные вопросы